评论

banner选项卡

没深度,拿着就能用

首先在JS里任意定义一个banner数据
banner: [
{ “name”: “第一个”, “id”: ‘0’ },
{ “name”: “第二个”, “id”: ‘1’ },
{ “name”: “第三个”, “id”: ‘2’ },
{ “name”: “第四个”, “id”: ‘3’ },
{ “name”: “第五个”, “id”: ‘4’ },
{ “name”: “第六个”, “id”: ‘5’ },
{ “name”: “第七个”, “id”: ‘6’ },
{ “name”: “第八个”, “id”: ‘7’ },
{ “name”: “第九个”, “id”: ‘8’ }
]

然后HTML 元素
<scroll-view class=‘banner’ scroll-x scroll-left="{{scrollLeft}}" scroll-with-animation=’{{true}}’>
<view class=‘banner-li {{num==index?“active”:""}}’ wx:for=’{{banner}}’ wx:key=’{{index}}’ data-num="{{index}}" data-id=’{{item.id}}’ bindtap=“bannerTap”>{{item.name}}</view>
</scroll-view>

样式走起来

.banner{
display: flex;
white-space: nowrap;
height: 80rpx;
margin-top: 20rpx;
}
.banner .banner-li{
display: inline-block;
line-height: 80rpx;
padding: 0 20rpx;
margin-left: 10rpx;
font-size: 36rpx;
color: #909090;
}
.banner .active{
color: #000;
font-size: 50rpx;
}
这个时候就是这样的了

然后就是bannerTap点击之后的事件
bannerTap: function (e) {
if (e.currentTarget.offsetLeft > 187.5) {
this.setData({
scrollLeft: e.currentTarget.offsetLeft - 150,
num: e.currentTarget.dataset.num,
id: e.currentTarget.dataset.id,
});
} else {
this.setData({
scrollLeft: e.currentTarget.offsetLeft - 140,
num: e.currentTarget.dataset.num,
id: e.currentTarget.dataset.id,
});
};
},

点击事件 设置scroll-left 偏移距离

PS:这个距离我是根据banner内容算出来的 不能做到动态居中,
如果大大们有更好的方案,求鞭策

最后一次编辑于  09-24  
点赞 1
收藏
评论

1 个评论

  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    09-24

    这样效果也差不多啦

    09-24
    赞同
    回复 5
    • 王志鹏
      王志鹏
      09-25
      这样还是有一个缺点就是如果banner列表是后台动态获取的话 无法确认每个的宽度 也就是说scroll-left的时候需要自己算
      09-25
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      09-25回复王志鹏

      那试试下面的

      var query = wx.createSelectorQuery()

      query.selectAll('.banner-li').boundingClientRect()

      query.exec(function (res) {

          console.log(res)

      })

      res里有每个的高宽

      09-25
      回复
    • 王志鹏
      王志鹏
      09-25回复o0o有脾气的酸奶
      不行啊 兄弟 这个地方我挖了一个坑 点击后选中的选项字体变大,宽度也变大了 但是获取的是变大之前的宽度 看来还是要在这个上花点心思了
      09-25
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      09-25回复王志鹏

      https://developers.weixin.qq.com/s/DpSJWDmq7XbI

      09-25
      1
      回复
    • 王志鹏
      王志鹏
      09-25回复o0o有脾气的酸奶
      厉害啊 受教了
      09-25
      回复