微信小程序使用有赞van-tabbar组件

前面一篇文章已经说过怎么搭建微信小程序npm项目了，看这篇文章前先了微信小程序npm构建https://blog.csdn.net/Acer2016/article/details/86999341

废话不多说，直接进入主题

1.在需要使用的页面的 .json文件里面添加配置（根据自己插件路径配置）

"usingComponents": {

"van-tabbar": "/miniprogram_npm/miniprogram_npm/vant-weapp/tabbar/index",

"van-tabbar-item": "/miniprogram_npm/miniprogram_npm/vant-weapp/tabbar-item/index"

}

2.保证配置没问题进行第二步 .wxml 写页面布局

写退货页

{{item}}

写换货列表

{{item}}

写购物车

{{item}}

写商城

{{item}}

active="{{active}}"

custom-class="tabbar"

safe-area-inset-bottom="{{ false }}"

bind:change="onChange"

>

换货

列表

购物车

商城

3.不用想.wxss文件了，不用写任何代码，直接上逻辑文件 .js

Page({

/**

* 页面的初始数据

*/

data: {

//默认第一页

currentData:0,

//模拟数据

prodlist:[1,2,3,4,5,6,7,8,9,0],

shoplist: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],

cartlist: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],

changelist: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],

//active是van-tabar属性类型是number

active:0

},

//tabbar监听切换swiper

onChange(event) {

console.log(event.detail);

this.setData({

page: event.detail,

currentData: event.detail

})

},

//swiper滑动监听切换tabbar

swiperChange(event){

console.log(event.detail.current)

this.setData({

active: event.detail.current

})

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

 

},

 

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

 

},

 

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

 

},

 

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

 

},

 

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

 

},

 

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

 

},

 

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

 

},

 

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

 

},

//分享

onShareAppMessage: function () {

return {

title: '页面分享',

// imageUrl: '/images/a.png'

}}})

效果如下；