评论

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 元素

item.id}}’ bindtap=“bannerTap”>{{item.name}}

样式走起来

.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内容算出来的 不能做到动态居中,
如果大大们有更好的方案,求鞭策

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

1 个评论

登录 后发表内容