iviewWeapp之index索引列表记录

iviewWeapp之index索引列表记录

官方示例：https://weapp.iviewui.com/components/index#示例

引用：
"usingComponents": {
"i-index": "../../dist/index/index",
"i-index-item": "../../dist/index-item/index"
}

示例：




{{it.name}}

import { cities } from './city';
Page({
data : {
cities : []
},
onChange(event){
console.log(event.detail,'click right menu callback data')
},
onReady(){
let storeCity = new Array(26);
const words = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]
words.forEach((item,index)=>{
storeCity[index] = {
key : item,
list : []
}
})
cities.forEach((item)=>{
let firstName = item.pinyin.substring(0,1);
let index = words.indexOf( firstName );
storeCity[index].list.push({
name : item.name,
key : firstName
});
})
this.data.cities = storeCity;
this.setData({
cities : this.data.cities
})
}
});

操作案例：

引用："usingComponents": {
"i-index": "../../dist/index/index",
"i-index-item": "../../dist/index-item/index"
}

示例：





{{it.brandName}}

data: funxtion data(){
return {
brandList: [
{ key: "A", list: [
{ id:1, img:"", pinyin:"AA", brandName:"A1" },
{ id:2, img:"", pinyin:"AB", brandName:"A2" },
{ id:3, img:"", pinyin:"AC", brandName:"A3" }
]},
{
key: "B", list: [
{ id:4, img:"", pinyin:"BA", brandName:"B1" },
{ id:5, img:"", pinyin:"BB", brandName:"B2" },
{ id:6, img:"", pinyin:"BC", brandName:"B3" }
]
},
{
key: "3", list: [
{ id:7, img:"", pinyin:"san", brandName:"33" },
]
}
],
}
}

.i-index-brand{
position: relative;
top: 0;
z-index: 99;
background-color: yellow;
margin-top: 100rpx;
}
.i-index-brand-item{
width: 100%;
height: 80rpx;
line-height: 80rpx;
padding-left: 40rpx;
background-color: #fff;
border-bottom: 2rpx solid #ededed;
}
.brand-img{
width: 100rpx;
height: 80rpx;
background-color: yellow;
margin-right: 30rpx;
}

更改点：

==index.wxml
<view class="i-index-fixed-item"
wx:for="{{fixedData}}"
wx:key="index" // wx:key="{{index}}" => wx:key="index"
data-index="{{index}}"
catchtap="handlerFixedTap">
{{item}}

==index.js
data新增属性：fixedItemHeight: 0, listTop: 0

handlerScroll(event){
const detail = event.detail;
const scrollTop = detail.scrollTop;
const indexItems = this.getRelationNodes('../index-item/index');
indexItems.forEach((item,index)=>{
let data = item.data;
let offset = data.top + data.height;
if( scrollTop < offset && scrollTop >= data.top ){
this.setData({
current : index,
// currentName : data.currentName // 注释此项或去除handlerScroll方法
})
}
})
},

handlerTouchMove(event){
const data = this.data;
const touches = event.touches[0] || {};
const pageY = touches.pageY;
const rest = pageY - data.startTop;
let index = Math.floor( rest/data.fixedItemHeight ); // 更改点
index = index >= data.itemLength ? data.itemLength -1 : ( index <= 0 ? 0 : index );
index = index<0?0:index; // 新增
const movePosition = this.getCurrentItem(index);

/*
* 当touch选中的元素和当前currentName不相等的时候才震动一下
* 微信震动事件
*/
if( movePosition.name !== this.data.currentName ){
wx.vibrateShort();
}

this.setData({
scrollTop : movePosition.top - this.listTop, // 更改点
currentName : movePosition.name,
isTouches : true
})

this.triggerCallback({
index : index,
current : movePosition.name
})
},

setTouchStartVal(){
const className = '.i-index';
const query = wx.createSelectorQuery().in(this);
query.select( className ).boundingClientRect((res)=>{
this.setData({
// fixedItemHeight: res.height / 40,
listTop: res.top
})
}).exec()
}