How to encapsulate a Tab bar with pictures in WeChat applet
Preface
Recently I was working on a WeChat applet, and I saw that many software have a tab bar with pictures that can be slid. Then I looked at some component libraries, including Vant and WeUI, and found that the tab bars they provided seemed to be all the same. It only has the function of title. If I don’t find that I can correct it or add pictures, then I suddenly thought of encapsulating it myself. Let’s show you the effect first.
1. Finished product effect
The following describes my packaging process
2. Usage steps
The wxml code is as follows:
<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>
The js code is as follows:
// 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);
},
The wxss code is as follows:
.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;
}
Summarize
The process is all in the comments. If you have any questions, you can post them in the comment area for everyone to discuss together.