开发自定义tabbar

app.json

@@ -10,6 +10,7 @@
         "pages/index/index"
     ],
     "tabBar": {
+        "custom": true,
         "list": [{
             "pagePath": "pages/my/index",
             "text": "我的"

app.wxss

@@ -1,46 +1,52 @@
 /**app.wxss**/
 page {
-  width: 100%;
-  /* min-height: 100%; */
-  color: #333;
-  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
-  background: #F2F6FC;
+    width: 100%;
+    /* min-height: 100%; */
+    color: #333;
+    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+    background: #F2F6FC;
 }
 
 view {
-  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
 }
 
 text {
-  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
 }
+
 .container {
-  height: auto;
-  box-sizing: border-box;
-  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+    height: auto;
+    box-sizing: border-box;
+    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
 }
 
 #share {
-  width: 375px;
-  height: 300px;
-  position: absolute;
-  left: -999rpx;
-  top: -9999rpx;
+    width: 375px;
+    height: 300px;
+    position: absolute;
+    left: -999rpx;
+    top: -9999rpx;
 }
 
 .textOver {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .resetBtn {
-  padding: 0px;
-  margin: 0;
-  line-height: normal;
-  background-color: transparent;
+    padding: 0px;
+    margin: 0;
+    line-height: normal;
+    background-color: transparent;
 }
 
 .resetBtn::after {
-  border: none;
+    border: none;
+}
+
+.seat {
+    height: 100rpx;
+    padding-bottom: env(safe-area-inset-bottom);
 }

custom-tab-bar/index.js

@@ -0,0 +1,47 @@
+// custom-tab-bar/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        selected: 0,
+        color: "#999999",
+        selectedColor: "#32CA69",
+        listTab: [{
+            "pagePath": "/pages/my/index",
+            "text": "我的",
+            "iconPath": "/static/my.png",
+            "selectedIconPath": "/static/my2.png"
+        }, {
+            "pagePath": "/pages/index/index",
+            "text": "推荐",
+            "iconPath": "/static/tj.png",
+            "selectedIconPath": "/static/tj2.png"
+        }, {
+            "pagePath": "/pages/logs/logs",
+            "text": "作品",
+            "iconPath": "/static/zp.png",
+            "selectedIconPath": "/static/zp2.png"
+        }]
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        switchTab(e) {
+            const data = e.currentTarget.dataset;
+            const url = data.path;
+            wx.switchTab({
+                url
+            });
+        }
+    }
+})

custom-tab-bar/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

custom-tab-bar/index.less

@@ -0,0 +1,31 @@
+.tab-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: white;
+    display: flex;
+    border-top: 1rpx solid rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    padding: 14rpx 0rpx;
+    padding-bottom: env(safe-area-inset-bottom);
+
+    .tab-bar-item {
+        flex: 1;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+
+        image {
+            width: 48rpx;
+            height: 48rpx;
+        }
+
+        view {
+            font-size: 24rpx;
+            margin-top: 10rpx;
+        }
+    }
+}

custom-tab-bar/index.wxml

@@ -0,0 +1,7 @@
+<view class="tab-bar">
+    <view wx:for="{{listTab}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}"
+        bindtap="switchTab">
+        <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
+        <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
+    </view>
+</view>

custom-tab-bar/index.wxss

@@ -0,0 +1,28 @@
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: white;
+  display: flex;
+  border-top: 1rpx solid rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  padding: 14rpx 0rpx;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.tab-bar .tab-bar-item {
+  flex: 1;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.tab-bar .tab-bar-item image {
+  width: 48rpx;
+  height: 48rpx;
+}
+.tab-bar .tab-bar-item view {
+  font-size: 24rpx;
+  margin-top: 10rpx;
+}

pages/index/index.js

@@ -0,0 +1,18 @@
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {},
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onShow() {
+        if (typeof this.getTabBar === 'function') {
+            this.getTabBar().setData({
+                selected: 1
+            })
+        }
+    },
+})

pages/my/index.js

@@ -1,180 +1,185 @@
 import {
-  getUserInfo,
-  getVipInfo
+    getUserInfo,
+    getVipInfo
 } from '~/api/user'
 import {
-  getProducts,
-  getTasks,
-  buyVip,
-  buyNum,
-  submitTask
+    getProducts,
+    getTasks,
+    buyVip,
+    buyNum,
+    submitTask
 } from '~/api/global'
 const app = getApp()
 Page({
-  data: {
-    userInfo: {},
-    vipTime: '',
-    tasks: [],
-    isIos: app.globalData.isIOS,
-    productNum: {},
-    productVip: {}
-  },
-  onLoad() {
-    this.getProducts()
-  },
-  async onShow() {
-    let uid = wx.getStorageSync('uid') || ''
-    if (!uid) {
-      getApp().callBack = (res) => {
-        this.setUserInfo()
-      }
-    } else {
-      this.setUserInfo()
-    }
-  },
-  // 设置用户信息及vip状态和任务完成情况
-  async setUserInfo() {
-    let userInfo = await getUserInfo()
-    let vipTime = await getVipInfo()
-    this.getTasks()
-    this.setData({
-      userInfo,
-      vipTime,
-    })
-  },
-  async getTasks() {
-    let tasks = await getTasks()
-    this.setData({
-      tasks
-    })
-  },
-  async getProducts() {
-    let products = await getProducts()
-    let productVip = products.find(item => {
-      return item.type == 1
-    })
-    let productNum = products.find(item => {
-      return item.type == 2
-    })
-    this.setData({
-      productNum,
-      productVip
-    })
-  },
-  //购买vip和购买次数不是一个接口 type 1001是vip，1010是次数
-  async toBuy({
-    currentTarget
-  }) {
-    let productId = currentTarget.dataset.type
-    wx.showLoading({
-      title: '提交中',
-      mask: true
-    })
-    let res = ''
-    if (productId == '1001') {
-      res = await buyVip({
-        productId
-      }).finally(() => {
-        wx.hideLoading()
-      })
-    } else if (productId == '1010') {
-      res = await buyNum({
-        productId
-      }).finally(() => {
-        wx.hideLoading()
-      })
-    } else {
-      wx.hideLoading()
-      wx.showToast({
-        title: "支付失败,请重试",
-        icon: "none"
-      })
-    }
-    let {
-      timeStamp,
-      nonceStr,
-      signType,
-      paySign
-    } = res
-    // package保留字
-    wx.requestPayment({
-      timeStamp,
-      nonceStr,
-      package: res.package,
-      signType,
-      paySign,
-      success(res) {
-        wx.showToast({
-          title: "支付成功",
-          duration: 2500
+    data: {
+        userInfo: {},
+        vipTime: '',
+        tasks: [],
+        isIos: app.globalData.isIOS,
+        productNum: {},
+        productVip: {}
+    },
+    onLoad() {
+        this.getProducts()
+    },
+    async onShow() {
+        if (typeof this.getTabBar === 'function') {
+            this.getTabBar().setData({
+                selected: 0
+            })
+        }
+        let uid = wx.getStorageSync('uid') || ''
+        if (!uid) {
+            getApp().callBack = (res) => {
+                this.setUserInfo()
+            }
+        } else {
+            this.setUserInfo()
+        }
+    },
+    // 设置用户信息及vip状态和任务完成情况
+    async setUserInfo() {
+        let userInfo = await getUserInfo()
+        let vipTime = await getVipInfo()
+        this.getTasks()
+        this.setData({
+            userInfo,
+            vipTime,
+        })
+    },
+    async getTasks() {
+        let tasks = await getTasks()
+        this.setData({
+            tasks
+        })
+    },
+    async getProducts() {
+        let products = await getProducts()
+        let productVip = products.find(item => {
+            return item.type == 1
+        })
+        let productNum = products.find(item => {
+            return item.type == 2
+        })
+        this.setData({
+            productNum,
+            productVip
         })
-        setTimeout(() => {
-          this.setUserInfo()
-        }, 1500)
+    },
+    //购买vip和购买次数不是一个接口 type 1001是vip，1010是次数
+    async toBuy({
+        currentTarget
+    }) {
+        let productId = currentTarget.dataset.type
+        wx.showLoading({
+            title: '提交中',
+            mask: true
+        })
+        let res = ''
+        if (productId == '1001') {
+            res = await buyVip({
+                productId
+            }).finally(() => {
+                wx.hideLoading()
+            })
+        } else if (productId == '1010') {
+            res = await buyNum({
+                productId
+            }).finally(() => {
+                wx.hideLoading()
+            })
+        } else {
+            wx.hideLoading()
+            wx.showToast({
+                title: "支付失败,请重试",
+                icon: "none"
+            })
+        }
+        let {
+            timeStamp,
+            nonceStr,
+            signType,
+            paySign
+        } = res
+        // package保留字
+        wx.requestPayment({
+            timeStamp,
+            nonceStr,
+            package: res.package,
+            signType,
+            paySign,
+            success(res) {
+                wx.showToast({
+                    title: "支付成功",
+                    duration: 2500
+                })
+                setTimeout(() => {
+                    this.setUserInfo()
+                }, 1500)
 
-      },
-      fail(res) {
-        wx.showToast({
-          title: "支付失败",
-          icon: "none"
+            },
+            fail(res) {
+                wx.showToast({
+                    title: "支付失败",
+                    icon: "none"
+                })
+            }
+        })
+    },
+    // 提交任务
+    async submitTask({
+        currentTarget
+    }) {
+        let id = currentTarget.dataset.type
+        await submitTask({
+            id
         })
-      }
-    })
-  },
-  // 提交任务
-  async submitTask({
-    currentTarget
-  }) {
-    let id = currentTarget.dataset.type
-    await submitTask({
-      id
-    })
-    wx.showToast({
-      title: id == '1' ? '签到成功！' : id == 3 ? "观看成功!" : "",
-      icon: "none"
-    })
-    this.setUserInfo()
-  },
-  jump({
-    currentTarget
-  }) {
-    let url = currentTarget.dataset.url
-    wx.navigateTo({
-      url: url
-    });
-  },
-  // 调起广告
-  rewardedVideo() {
-    if (this.data.tasks.length != 3 || this.data.tasks[2].completed) {
-      return
-    }
-    this.selectComponent('#advert').rewardedVideo();
-  },
-  clipboar() {
-    wx.setClipboardData({
-      data: this.data.userInfo.user.eid,
-      success: function (res) { //成功回调函数
         wx.showToast({
-          title: '已复制',
-          icon: "none"
+            title: id == '1' ? '签到成功！' : id == 3 ? "观看成功!" : "",
+            icon: "none"
+        })
+        this.setUserInfo()
+    },
+    jump({
+        currentTarget
+    }) {
+        let url = currentTarget.dataset.url
+        wx.navigateTo({
+            url: url
+        });
+    },
+    // 调起广告
+    rewardedVideo() {
+        if (this.data.tasks.length != 3 || this.data.tasks[2].completed) {
+            return
+        }
+        this.selectComponent('#advert').rewardedVideo();
+    },
+    clipboar() {
+        wx.setClipboardData({
+            data: this.data.userInfo.user.eid,
+            success: function (res) { //成功回调函数
+                wx.showToast({
+                    title: '已复制',
+                    icon: "none"
+                })
+            }
         })
-      }
-    })
-  },
-  // 分享配置
-  onShareAppMessage: function (res) {
-    const user = wx.getStorageSync('user');
-    return {
-      title: '课文朗读，从未如此有趣。',
-      path: `/pages/index/index?uid=${user.uid}`,
-      imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png'
-    }
-  },
-  onShareTimeline: function () {
-    return {
-      title: '终于找到适合孩子的朗读神器了！动画配音，边玩边学！',
-      query: `uid=${wx.getStorageSync('uid')}`,
-      imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/yuwen.jpg'
-    }
-  },
+    },
+    // 分享配置
+    onShareAppMessage: function (res) {
+        const user = wx.getStorageSync('user');
+        return {
+            title: '课文朗读，从未如此有趣。',
+            path: `/pages/index/index?uid=${user.uid}`,
+            imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png'
+        }
+    },
+    onShareTimeline: function () {
+        return {
+            title: '终于找到适合孩子的朗读神器了！动画配音，边玩边学！',
+            query: `uid=${wx.getStorageSync('uid')}`,
+            imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/yuwen.jpg'
+        }
+    },
 })

pages/my/index.json

@@ -1,8 +1,8 @@
 {
-  "usingComponents": {
-    "rewardedVideo": "/components/rewardedVideo/index",
-    "navigationBar":"/components/navigationBar/index"
-  },
-  "navigationStyle": "custom",
-  "enablePullDownRefresh": false
+    "usingComponents": {
+        "rewardedVideo": "/components/rewardedVideo/index",
+        "navigationBar": "/components/navigationBar/index"
+    },
+    "navigationStyle": "custom",
+    "enablePullDownRefresh": false
 }

pages/my/index.wxml

@@ -141,6 +141,9 @@
             </view>
         </view>
     </view>
+    <view class="seat"> 
+        
+    </view>
 </view>
 <!-- 广告组件 -->
 <rewardedVideo id='advert' bind:taskOver="setUserInfo" />