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

fang-kang · Nov 11, 2018 · 1bcd329 · 1bcd329
1 parent a700b45
commit 1bcd329
Showing 1 changed file with 19 additions and 11 deletions.
diff --git a/examples/hello-uniapp/pages/template/index-list/index-list.vue b/examples/hello-uniapp/pages/template/index-list/index-list.vue
@@ -1,22 +1,24 @@
 <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>
 					</view>
 				</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>