微信小程序 指示条跟随滑动
微信小程序版本
使用 scroll-view 使用函数
wxml
<view class="special"> <scroll-view scroll-x="true" bindscroll="bindscroll"> <view class="option flex"> <block wx:for="{{lista}}"> <view class="box"> <image></image> <view>{{item.name}}</view> </view> </block> </view> </scroll-view> <view class="scrollbat"> <view class="present" style="left:{{around}}%"></view> </view> </view>
js
data{
around:0,
}
bindscroll(e){
获取 滚动得距离
e.detail.scrollLeft
获取可滚动的总距离 总长度 - 显示长度
let p = e.detail.scrollWidth - 375
滚动得距离 / 可滚动的总距离
let per = Math.round((滚动条总长度 - 拖动条) * percen)
this.setData({
around:per
})
this.setData({
around:per
})
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步