微信小程序如何封装一个带有图片的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);
},
wxss代码如下：
.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;
}
总结
过程都在注释内，有问题的可以发在评论区，大家共同探讨。