微信小程序 scroll-view 导航左右滚动

最新推荐文章于 2024-10-10 13:11:08 发布

菱玉

最新推荐文章于 2024-10-10 13:11:08 发布

阅读量868

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_43878003/article/details/116976788

版权

本文介绍如何在微信小程序中利用scroll-view组件，实现在点击导航项时，实现导航条的自动左右滚动并高亮选中当前项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面的数据可以用自己需要遍历的数据往里面放，这里就不写了，下面写的是如何让点击某项可以让这个导航自己向左向右移动并选中

		<scroll-view class="scroll-view_Hclass scroll-view" scroll-x scroll-left="{{scrollLeft}}" scroll-with-animation
			data-id="{{classIndex}}">
			<view class="scroll-view-item_Hclass" wx:for="{{classlist}}" wx:key="" :key="index" bindtap="getclassproducts"
				data-item="{{item}}" data-index="{{index}}">
				<view class="flexc flexcc index_new4">
					<view class="{{classIndex==index?'sr linebottom':'srnno'}}">{{item.categoryName}}</view>
				</view>
			</view>
		</scroll-view>
.scroll-view_Hclass {
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  height: 112rpx;
  position: fixed;
  top: 102rpx;
  z-index: 9;
}

.scroll-view-item_Hclass {
  display: inline-block;
  padding: 38rpx 20rpx;
  
}
.linebottom{
  border-bottom: solid 2px #F12C34;
}
.index_new4 {
  position: relative;
  /* width: 128rpx; */
}

.index_new4 view {
  z-index: 99;
}
.sr {
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.srnno {
  text-align: center;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
onLoad(){
      wx.getSystemInfo({
          success: (res) => {
            this.setData({
              pixelRatio: res.pixelRatio,
              windowHeight: res.windowHeight,
              windowWidth: res.windowWidth
            })
          },
        })
},
 //点击分类进行查询
  getclassproducts(e) {
    var that = this;
    var item = e.currentTarget.dataset.item
    var cur = e.currentTarget.dataset.index
    //每个tab选项宽度占1/5
    var singleNavWidth = this.data.windowWidth / 6;
    //tab选项居中                            
    this.setData({
      scrollLeft: (cur - 2) * singleNavWidth
    })
    that.setData({
      classIndex: cur
    })
  },