在做这个的时候,在论坛找了两个相关的的例子,体验不很好,所有就直接写了一个demo
提升体验的第一步就是要用scroll-view 标签 把他们包裹起来不让他们可以滚动,当你在右侧上下摩擦的时候,发现左侧在滚动,是多么的不开心
还有一定使用左右结构,不能直接把字母定位在页面右侧
还有一个最重要的也就是困扰楼主一会儿,就是一定要给 scroll-view 设置高,或许聪明的你们 不会像楼主一样 傻不拉几的找不到为什么设置了 scroll-into-view 的值却不滚动。
好了直接上代码
-
<scroll-view class=\"flex-wrap\">
-
<scroll-view class=\"flex-left\" scroll-y=\"true\" scroll-into-view=\"{{scrollIntoId}}\">
-
<view wx:for=\"{{groups}}\" wx:key=\"zimu\" wx:for-item=\"zimu\">
-
<view class=\"item item-a\" id=\"{{zimu.groupName}}\">{{zimu.groupName}}</view>
-
<view class=\"item\" wx:for=\"{{zimu.users}}\" wx:key=\"user\" wx:for-item=\"user\">{{user.name}}</view>
-
</view>
-
<navigator url=\"../project/projectlist\" open-type=\"switchTab\">go</navigator>
-
</scroll-view>
-
<view class=\"flex-right\">
-
<view class=\"zimulist\" bindtouchmove=\"touchmovefn\" bindtouchstart=\"touchstartfn\">
-
<view class=\"zimu\" wx:for=\"{{zimu}}\" wx:key=\"ABC\" data-id=\"{{item}}\">{{item}}</view>
-
</view>
-
</view>
-
</scroll-view>
复制代码
-
page{
-
height: 100%;
-
}
-
.zimu{
-
width: 50rpx;
-
height: 20px;
-
line-height: 20px;
-
}
-
.zimulist{
-
position: fixed;
-
top: 0;
-
right: 0;
-
bottom:0;
-
width: 50rpx;
-
z-index: 999999999999;
-
background-color: #fff;
-
text-align: center;
-
}
-
.item{
-
height: 88rpx;
-
line-height: 88rpx;
-
border-bottom: solid 1rpx #f0f1f2;
-
padding-left: 10rpx;
-
}
-
.item-a{
-
background-color: #f0f1f2;
-
}
-
.flex-wrap{
-
display: flex;
-
flex-direction: row;
-
width: 100%;
-
height: 100%;
-
}
-
.flex-left{
-
width: 700rpx;
-
height: 100%;
-
}
-
.flex-right{
-
width: 50rpx;
-
height: 100%;
-
}
复制代码
js里有个计算 被除以 20 ,20是根据 wxss 里一个字母高度 最好以px 为单位,不然还得区转换,这也是楼主的wxss 里其他都用的rpx;唯独这里使用了px;
-
Page({
-
data: {
-
zimu:[\'A\',\'B\',\'C\',\'D\',\'E\',\'F\',\'G\',\'H\',\'I\',\'J\',\'K\',\'M\',\'N\',\'O\',\'P\',\'Q\',\'R\',\'S\',\'T\',\'U\',\'V\',\'W\',\'X\',\'Y\',\'Z\'],
-
scrollIntoId:\'A\',
-
groups: [{
-
groupName: \'A\',
-
users: [
-
{
-
name: \'阿码\',
-
avatar: \'../../images/avatar.png\'
-
}
-
]
-
},
-
{
-
groupName: \'B\',
-
users: [
-
{
-
name: \'白娘子\',
-
avatar: \'../../images/avatar.png\'
-
},
-
{
-
name: \'包天齐\',
-
avatar: \'../../images/avatar.png\'
-
}
-
]
-
},
-
{
-
groupName: \'C\',
-
users: [
-
{
-
name: \'陈大年\',
-
avatar: \'../../images/avatar.png\'
-
},
-
{
-
name: \'丛云山\',
-
avatar: \'../../images/avatar.png\'
-
},
-
{
-
name: \'崔鸣贵\',
-
avatar: \'../../images/avatar.png\'
-
}
-
]
-
},
-
{
-
groupName: \'D\',
-
users: [
-
{
-
name: \'邓牛牛\',
-
avatar: \'../../images/avatar.png\'
-
},
-
{
-
name: \'刁仁衣\',
-
avatar: \'../../images/avatar.png\'
-
},
-
{
-
name: \'杜长城\',
-
avatar: \'../../images/avatar.png\'
-
}
-
]
-
},
-
{
-
groupName: \'F\',
-
users: [
-
{
-
name: \'范长龙\',
-
avatar: \'../../images/avatar.png\'
-
},
-
{
-
name: \'冯肖晓\',
-
avatar: \'../../images/avatar.png\'
-
}
-
]
-
},
-
{
-
groupName: \'G\',
-
users: [
-
{
-
name: \'甘地\',
-
avatar: \'../../images/avatar.png\'
-
},
-
{
-
name: \'高墙\',
-
avatar: \'../../images/avatar.png\'
-
},
-
{
-
name: \'宫都举\',
-
avatar: \'../../images/avatar.png\'
-
}
-
]
-
},
-
{
-
groupName: \'H\',
-
users: [
-
{
-
name: \'何芸\',
-
avatar: \'../../images/avatar.png\'
-
},
-
{
-
name: \'胡坨坨\',
-
avatar: \'../../images/avatar.png\'
-
},
-
{
-
name: \'黄坨坨\',
-
avatar: \'../../images/avatar.png\'
-
}
-
]
-
},
-
{
-
groupName: \'T\',
-
users: [
-
{
-
name: \'谭老头儿\',
-
avatar: \'../../images/avatar.png\'
-
},
-
{
-
name: \'汤云西\',
-
avatar: \'../../images/avatar.png\'
-
},
-
{
-
name: \'图图\',
-
avatar: \'../../images/avatar.png\'
-
}
-
]
-
},
-
{
-
groupName: \'X\',
-
users: [
-
{
-
name: \'夏一天\',
-
avatar: \'../../images/avatar.png\'
-
},
-
{
-
name: \'鲜轰轰\',
-
avatar: \'../../images/avatar.png\'
-
},
-
{
-
name: \'谢大佩\',
-
avatar: \'../../images/avatar.png\'
-
}
-
]
-
}
-
]
-
},
-
touchmovefn:function(e){ // 右侧字母检索
-
//console.log(e.changedTouches)
-
var letterIndex = e.changedTouches[\'0\'].pageY /20
-
// console.log(e)
-
// console.log(letterIndex)
-
var index = parseInt(letterIndex)
-
//console.log(index)
-
var letter = this.data.zimu[index]
-
//console.log(letter)
-
this.setData({
-
scrollIntoId:letter
-
})
-
wx.showToast({
-
title:letter
-
})
-
},
-
touchstartfn:function(e){
-
//console.log(e.target.id)
-
console.log(e);
-
var letter = e.target.dataset.id
-
this.setData({
-
scrollIntoId:letter
-
})
-
wx.showToast({
-
title:letter
-
})
-
}
-
})
复制代码
在打开的时候,楼主发现,在楼主的低端机上(华为荣耀6)如果是白板就用手在屏幕上上下摩擦一下就出来了,不摩擦却要等一会儿,在同事的高大上的ipone6+上却没有这样的情况,不知各位道友遇到类似的情况