微信小程序封装一个带有图片的Tab栏
前言
最近在做一个微信小程序,看到有许多软件上都有一种带有图片可以滑动的Tab栏,然后我就去看了一些组件库,包括Vant,WeUI,发现他们所提供的Tab栏好像都只有标题(title)的功能, 假如是我没发现可以指正 ,并不可以添加图片,那我就突发奇想,干脆自己封装一个得了,下面先给大家看一下效果
一、成品效果
二、使用步骤
wxml代码如下:
<scroll-view scroll-x="true" class="scroll-view-x" style="padding-top:10rpx" scroll-with-animation="true" scroll-left='{{nowleft}}' bindscroll="getleft" data-id="111"> <view> <!-- 里面的tab的单个对象 --> <view wx:for="{{tabList}}" wx:for-index="item" class="tab {{nowselect === item ? 'active' :''}}" wx:key="item" bindtap="getProductList" data-index="{{item+1}}" data-id="item" > <view class="roundImg"> <image class="tab_icon" src="../../../static/images/beer.png" ></image> </view> <text class="tab_text">热销{{item+1}}</text> </view> </view> </scroll-view>
js代码如下:
// pages/unceter/index/index.js const query = wx.createSelectorQuery() //选取wxml的dom元素 let systemInfo = wx.getSystemInfoSync(); //获取屏幕的尺寸大小 Page({ /** * 页面的初始数据 */ data: { tabList:[1,2,3,4,5,6,7,8,9,10,11,12], index:1, nowleft:0, //scroll往左走多少 nowselect:0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ windowHeight: systemInfo.windowHeight - 35, windowWidth: systemInfo.windowWidth, }) }, getProductList(e){ console.log(e.currentTarget.dataset.index); console.log(this.data.windowWidth); let proportion = this.data.windowWidth/375; //真机调试得出每个手机屏幕不同,我在微信工具这里满屏是375,在真机iphone11那里是414所以要获取屏幕宽度除以375获取比例 let index = e.currentTarget.dataset.index let length = this.data.tabList.length //获取当前有多少个按钮 this.setData({nowselect:index-1}) //获取当前的Index if(length>5){//长度必须超过5才可以用 if(index<=3){ //由于我这个组件从1开始所以是小于等于3,从0开始的话就小于2 this.setData({nowleft:0}) } else if(index>=length - 2){//由于我这个组件从1开始所以是大于等于length - 2,从0开始的话就小于大于等于length - 3 this.setData({nowleft:75*(length-5)*proportion}) //让倒数第三个在中间 } else{ this.setData({nowleft:75*(index-3)*proportion}) //让现在点击的在中间 } } // this.setData({nowleft:75*(index-1)}) console.log(this.data.nowleft); },
.tab{ height: 75rpx; display: inline-block; width:150rpx; text-align:center; } .tab_icon{ width: 50rpx; height: 50rpx; margin: 0 auto; text-align:center; display: block; border: solid 4rpx rgb(255, 255, 255); padding: 5rpx; border-radius: 50%; margin-top: 8rpx; } .active{ transform:scale(1.15) translate(0,-5%); color: rgb(199, 92, 42); font-weight: 700; } .active .tab_text{ background-color: #fff; color: rgb(199, 92, 42); } .tab_text{ font-size: 18rpx;padding: 0 8rpx 0 8rpx;background-color: rgb(50, 109, 73);border-radius:100rpx;color: #fff;position: relative;top: -3rpx; } .scroll-view-x{ background-color: rgb(50, 109, 73); white-space: nowrap; transition: all .3s; height: 120rpx; }
感谢博主,自己实际应用中做了适当调整!
转: https://blog.csdn.net/m0_65035567/article/details/121849679