提交 1bcd329e 编写于 作者: 郭胜强

修复index-list示例触摸超出范围报错的问题和style设置错误的问题

上级 a700b45b
<template>
<view class="page">
<scroll-view class="scrollList" scroll-y :scroll-into-view="scrollViewId" :style="{height:winHeight + 'px;'}">
<scroll-view class="scrollList" scroll-y :scroll-into-view="scrollViewId" :style="{height:winHeight + 'px'}">
<view class="uni-list">
<block v-for="(list,key) in lists" :key="key" v-if="list.data[0]">
<view class="uni-list-cell-divider" :id="list.letter">
{{list.letter}}
</view>
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list.data" :key="index" :class="list.data.length -1 == index ? 'uni-list-cell-last' : ''">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list.data" :key="index"
:class="list.data.length -1 == index ? 'uni-list-cell-last' : ''">
<view class="uni-list-cell-navigate">
{{item}}
</view>
......@@ -14,9 +15,10 @@
</block>
</view>
</scroll-view>
<view class="uni-indexed-list-bar" :class="touchmove ? 'active' : ''" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @touchcancel="touchCancel" :style="{height:winHeight + 'px;'}">
<view class="uni-indexed-list-bar" :class="touchmove ? 'active' : ''" @touchstart="touchStart" @touchmove="touchMove"
@touchend="touchEnd" @touchcancel="touchCancel" :style="{height:winHeight + 'px'}">
<text v-for="(list,key) in lists" :key="key" class="uni-indexed-list-text" :class="touchmoveIndex == key ? 'active' : ''"
:style="{heigth:itemHeight + 'px',lineHeight:itemHeight + 'px'}">{{list.letter}}</text>
:style="{heigth:itemHeight + 'px',lineHeight:itemHeight + 'px'}">{{list.letter}}</text>
</view>
<view class="uni-indexed-list-alert" v-if="touchmove">
{{lists[touchmoveIndex].letter}}
......@@ -35,7 +37,7 @@
touchmove: false,
touchmoveIndex: -1,
itemHeight: 0,
winHeight:0,
winHeight: 0,
scrollViewId: "A"
}
},
......@@ -49,20 +51,26 @@
this.touchmove = true;
let pageY = e.touches[0].pageY;
let index = Math.floor(pageY / this.itemHeight);
this.scrollViewId = this.lists[index].letter;
this.touchmoveIndex = index;
let item = this.lists[index];
if (item) {
this.scrollViewId = item.letter;
this.touchmoveIndex = index;
}
},
touchMove(e) {
let pageY = e.touches[0].pageY;
let index = Math.floor(pageY / this.itemHeight);
this.scrollViewId = this.lists[index].letter;
this.touchmoveIndex = index;
let item = this.lists[index];
if (item) {
this.scrollViewId = item.letter;
this.touchmoveIndex = index;
}
},
touchEnd() {
this.touchmove = false;
this.touchmoveIndex = -1;
},
touchCancel(){
touchCancel() {
this.touchmove = false;
this.touchmoveIndex = -1;
}
......@@ -124,4 +132,4 @@
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册