效果
代码
slidebar.wxml
代码语言：javascript复制<view id="s-bar" class="slidebar" bindtouchstart="_onTouchStart" bindtouchmove="_onTouchMove" bindtouchend="_onTouchEnd">
<view wx:for="{{data}}" class="slide-item" id="item-{{index}}" wx:key="{{index}}">
<text class="t {{item.selected ? 'slide-item-selected' : ''}}">{{item.key}}</text>
</view>
</view>
<view class="dialog" hidden="{{currentKey == '' || closeKeyDialog}}" animation="{{animationData}}" bindtransitionend="_onAnimationend">
{{currentKey}}
</view>slidebar.wxss
代码语言：javascript复制 /* components/slidebar/slidebar.wxss */
.slidebar{
position: absolute;
right: 0rpx;
height: 98vh;
width: 60rpx;
border-radius: 30rpx;
}
.slide-item{
display: flex;
justify-content: center;
justify-items: center;
height: 3.9vh;
width: 60rpx;
font-size: 24rpx;
color: #222222;
text-align: center;
line-height: 3.9vh;
font-weight: 400;
}
.slide-item .t{
width: 40rpx;
height: 40rpx;
display: inline-block;
}
.slide-item-selected{
font-weight: 500;
color: #ffffff;
background: #07C160;
border-radius: 50%;
}
.dialog{
position: absolute;
top: 50%;
margin-top: -180rpx;
left: 50%;
margin-left: -125rpx;
width: 250rpx;
height: 250rpx;
text-align: center;
font-size: 72rpx;
line-height: 250rpx;
color: #ffffff;
background: grey;
border-radius: 15%;
}
slidebar.js
// components/slidebar/slidebar.js
Component({
/**
* 组件的属性列表
*/
properties: {
data: {
type: Array,
value: [
{ key: "A" },
{ key: "B" },
{ key: "C" },
{ key: "D" },
{ key: "E" },
{ key: "F" },
{ key: "G" },
{ key: "H" },
{ key: "I" },
{ key: "J" },
{ key: "L" },
{ key: "M" },
{ key: "N" },
{ key: "O" },
{ key: "P" },
{ key: "Q" },
{ key: "R" },
{ key: "S" },
{ key: "T" },
{ key: "U" },
{ key: "V" },
{ key: "W" },
{ key: "X" },
{ key: "Y" },
{ key: "Z" }
]
}
},
/**
* 组件的初始数据
*/
data: {
selectedIndex: -1,
currentKey: "",
closeKeyDialog: false,
animationData: {},
},
lifetimes: {
attached: function () {
// 在组件实例进入页面节点树时执行
this.isTouch = false;
},
ready: function(){
this.data.data.forEach((d,i)=>{
this._wxQueryElementInfo("#item-" i).then(res => {
d.top = res[0].top;
d.left = res[0].left;
d.height = res[0].height;
d.width = res[0].width;
});
});
this.animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease',
});
},
detached: function () {
// 在组件实例被从页面节点树移除时执行
},
},
/**
* 组件的方法列表
*/
methods: {
_onTouchStart: function(e){
this.isTouch = true;
this.setData({
closeKeyDialog: false,
animationData: this.animation.opacity(1).step().export()
});
this._markSlideItemSeleted(e.touches[0].clientY);
},
_onTouchMove: function(e){
this._markSlideItemSeleted(e.touches[0].clientY);
},
_onTouchEnd: function(e){
this.isTouch = false;
this.setData({
animationData: this.animation.opacity(0).step().export()
})
},
/**
* 通过selector查询元素信息
*/
_wxQueryElementInfo: function(selector){
return new Promise((resolve, reject)=>{
var query = wx.createSelectorQuery().in(this);
query.select(selector).boundingClientRect();
query.selectViewport().scrollOffset();
query.exec(function (res) {
resolve(res);
});
});
},
/**
* 根据y的位置标记SlideItem的selected状态
*/
_markSlideItemSeleted: function(y){
for(var i=0; i<this.data.data.length; i ){
var d = this.data.data[i];
if (y >= d.top && y <= d.top d.height) {
if(this.data.selectedIndex == i){
return;
}
this._setSlideItemSelectStatus(d,i);
console.log("当前选中=>" d.key);
this.triggerEvent("selected",d);
return;
}
}
},
_setSlideItemSelectStatus(d,i){
d.selected = true;
if (this.data.selectedIndex != -1) {
this.data.data[this.data.selectedIndex].selected = false;
}
this.setData({
data: this.data.data,
currentKey: d.key,
selectedIndex: i
});
},
_onAnimationend: function(e){
if (this.isTouch){
return;
}
console.log("动画结束")
this.setData({
closeKeyDialog: true
});
},
/**
* 通过key更新slidebar选择的item
*/
updateItemSelectedByKey: function(key){
this.data.data.forEach((d,i)=>{
if(d.key == key){
this._setSlideItemSelectStatus(d,i);
return;
}
});
},
/**
* 通过index更新slidebar选择的item
*/
updateItemSelectedByIndex: function(index){
if(index > 0 && index < this.data.data.length){
this._setSlideItemSelectStatus(this.data.data[index], index);
}
}
}
})
