WeChatウィジェットVant WeappフレームワークのIndexBarインデックスバーのアルファベットを使用して問題を動かさない
wxml
js
<view wx:if="{
{hasUserInfo}}">
<navbar page-name=" ">navbar>
<van-transition custom-class="hellow-block" show="{
{ hellowShow }}" name="fade-down">
{
{ isNow }} :{
{ userInfo.nickName }}van-transition>
<view class="contain">
<van-index-bar scroll-top="{
{ scrollTop }}" highlight-color='#FF8B00'>
<view wx:for="{
{ customerData }}" wx:key="index">
<van-index-anchor index="{
{ item.letter }}" />
<van-cell wx:for="{
{ item.customerList }}" wx:for-item="im" title="{
{ im.name }}" />
view>
van-index-bar>
view>
view>
js
const app = getApp()
import util from '../../utils/util.js';
Page({
data: {
scrollTop: 0,
isNow: ' ',
customerData: [{
letter: 'A',
customerList: [{
'name': 'A '
},
{
'name': 'A '
},
{
'name': 'A '
}
]
}, {
letter: 'B',
customerList: [{
'name': 'B '
},
{
'name': 'B '
}
]
}, {
letter: 'C',
customerList: [{
'name': 'C '
},
{
'name': 'C '
},
]
},
]
},
// onPageScroll
onPageScroll(event) {
this.scrollTop = event.scrollTop;
},