小程序的scroll-view组件的点击自动滑动效果（类似于微信流量充值中滑块的效果）

最新推荐文章于 2025-06-24 21:23:20 发布

原创

最新推荐文章于 2025-06-24 21:23:20 发布 · 置顶 · 5.5k 阅读

11 ·

CC 4.0 BY-SA版权

废话不多说，直接上图吧！我的目的是想要达到鼠标点击每项时，滑块会自动滑动，具体可打开微信流量充值体验体验。但是小程序scroll-view组件并不能达到这个效果，必须手动拖动，才能滑动，网上找了许久没有找到相关的代码片段，最终发现zanUI有这个组件，参照这个组件的tab组件来完成的。zanUIGitHub地址，至于zanUI的使用，请看我【zanUI的使用】一文。

具体代码参考如下：

.wxml代码如下：

<view class="title">特惠流量月包</view>
        <view class="scroll-box">
            <scroll-view class="coupon-scroll-view_x" scroll-x="true" scroll-with-animation="true" bindscrolltoupper="toUpper" bindscrolltolower="toLower"  id="scroll-view" scroll-left="{
  
  { scrollLeft }}">
                <view class="flow-items {
  
  { item.i