iviewWeapp之index索引列表记录

iviewWeapp之index索引列表记录

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

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

示例：
<view class="i-index-demo">
    <i-index height="100%" bind:change="onChange">
        <i-index-item 
            wx:for="{{ cities }}" 
            wx:for-index="index" 
            wx:key="{{index}}" 
            wx:for-item="item" name="{{item.key}}">
            <view 
                class="i-index-demo-item" 
                wx:for="{{item.list}}" 
                wx:for-index="in" 
                wx:key="{{in}}" 
                wx:for-item="it">
                {{it.name}}
            </view>
        </i-index-item>
    </i-index>
</view>

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" 
}

示例：
<view class="i-index-brand">
            <i-index height="90%" bindchange="toChange">
                <i-index-item
                    wx:for="{{ brandListNew }}" 
                    wx:for-index="index" 
                    wx:key="index" 
                    wx:for-item="item" name="{{item.key}}">
                    <view 
                        class="i-index-brand-item dflex-start" 
                        wx:for="{{item.list}}" 
                        wx:for-index="in" 
                        wx:key="in" 
                        wx:for-item="it">
                        <view class="brand-img"><image src="{{it.img}}"></image></view>
                        {{it.brandName}}
                    </view>
                </i-index-item>
            </i-index>
        </view>


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}}
            </view>

==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()
        }