小程序｜swiper-view左右滑动效果实现

最新推荐文章于 2024-06-10 15:58:47 发布

原创最新推荐文章于 2024-06-10 15:58:47 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

3 篇文章

订阅专栏

本文详细解析了微信小程序中滚动视图组件的使用方法，包括如何通过scroll-x属性实现水平滚动，以及如何利用data-item和bindtap绑定事件来控制滚动到指定元素。文章还展示了如何设置white-space和display样式属性以优化布局，并提供了完整的Page数据结构示例。

效果演示

<view>
    <scroll-view class="scroll" scroll-x style="width: 100%"  scroll-into-view="{{toView}}">
        <view wx:for="{{list}}" data-item='{{item}}' wx:for-item="item" class='item' bindtap="tap" id="{{item.name}}">
        {{item.name}}
        </view>
    </scroll-view>
</view>

.scroll {
    white-space: nowrap;    /*重点*/
}
.item {
    display: inline-block;    /*重点*/
    padding: 20rpx 35rpx;
    border: 1rpx solid red;
}


Page({
  data: {
    toView: 'a0',   /* 不能用数字，建议用字符串 */
    list: [
      {id: 1, name: 'a1'},
      {id: 2, name: 'a2'},
      {id: 3, name: 'a3'},
      {id: 4, name: 'a4'},
      {id: 5, name: 'a5'},
      {id: 6, name: 'a6'},
      {id: 7, name: 'a7'},
      {id: 8, name: 'a8'},
    ]
  },
  tap: function(e) {
    let id = e.target.dataset.item.id
    const to = 'a' + (id - 1)
    console.log(to)
    this.setData({
      toView: to
    })
  }
})

结束！！！