头部导航

1

README.md

@@ -0,0 +1,5 @@
+## components-组件库
+### navBar-顶部导航栏
+内容：navbarInfo
+点击事件：bindtap="点击名称"
+点击类型：type=='1':返回事件；type==2：头像点击事件

app.json

@@ -1,8 +1,10 @@
 {
   "pages": [
+    "pages/product/product",
     "pages/test/test",
     "pages/index/index",
-    "pages/logs/logs"
+    "pages/logs/logs",
+    "pages/userCenter/userCenter"
   ],
   "usingComponents": {
     "van-button": "/miniprogram_npm/vant-weapp/button/index",

components/navBar/navBar.js

@@ -0,0 +1,40 @@
+// components/navBar/navBar.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    navbarInfo: { type: Object }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    userInfo: {},
+    hasUserInfo: false,
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    leftBtn(e) {
+      let type = e.currentTarget.dataset.smile
+      // type==1:返回，type==2:头像
+      this.triggerEvent("leftBtn", type)
+    },
+    getUserProfile(e) {
+      // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
+      wx.getUserProfile({
+        desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
+        success: (res) => {
+          this.setData({
+            userInfo: res.userInfo,
+            hasUserInfo: true
+          })
+        }
+      })
+    },
+  },
+})

components/navBar/navBar.json

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

components/navBar/navBar.wxml

@@ -0,0 +1,7 @@
+<van-nav-bar title="{{navbarInfo.title}}">
+  <van-icon name="arrow-left" slot="left" wx:if="{{navbarInfo.leftShow}}" bindtap="leftBtn" data-smile='1' />
+  <view slot="left" wx:else class="leftInfo">
+    <text wx:if="{{!hasUserInfo}}" bindtap="getUserProfile">获取头像昵称</text>
+    <image wx:else src="{{userInfo.avatarUrl}}" mode="cover" bindtap="leftBtn" data-smile='2'></image>
+  </view>
+</van-nav-bar>

components/navBar/navBar.wxss

@@ -0,0 +1,7 @@
+.leftInfo image {
+  width: 75rpx;
+  height: 75rpx;
+  border-radius: 90rpx;
+  position: relative;
+  top: 25rpx;
+}

pages/product/product.js

@@ -0,0 +1,84 @@
+// pages/product/product.js
+const app = getApp()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    navbarInfo: {
+      title: '拼团列表',
+      leftShow: false
+    }
+  },
+  leftBtn: function (type) {
+    if (type.detail == '1') {
+      console.log('返回');
+    } else {
+      wx.navigateTo({
+        url: '/pages/userCenter/userCenter',
+      })
+      // wx.redirectTo({
+      //   url: '/pages/userCenter/userCenter',
+      // })
+      // wx.reLaunch({
+      //   url: '/pages/userCenter/userCenter',
+      // })
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/product/product.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "nav-bar": "/components/navBar/navBar"
+  }
+}

pages/product/product.wxml

@@ -0,0 +1,9 @@
+<view class="mian">
+  <nav-bar navbarInfo="{{navbarInfo}}" bind:leftBtn="leftBtn"></nav-bar>
+  <view>
+    轮播图
+  </view>
+  <view>
+    产品列表
+  </view>
+</view>

pages/product/product.wxss

@@ -0,0 +1 @@
+/* pages/product/product.wxss */

pages/test/test.js

@@ -1,23 +1,71 @@
 // pages/test/test.js
-Component({
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    navbarInfo: {
+      title: '测试页面',
+      leftShow: false
+    }
+  },
+  leftBtn: function (type) {
+    console.log(type.detail);
+  },
   /**
-   * 组件的属性列表
+   * 生命周期函数--监听页面加载
    */
-  properties: {
+  onLoad: function (options) {
 
   },
 
   /**
-   * 组件的初始数据
+   * 生命周期函数--监听页面初次渲染完成
    */
-  data: {
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
 
   },
 
   /**
-   * 组件的方法列表
+   * 用户点击右上角分享
    */
-  methods: {
+  onShareAppMessage: function () {
 
   }
-})
+})

pages/test/test.json

@@ -1,4 +1,5 @@
 {
-  "component": true,
-  "usingComponents": {}
+  "usingComponents": {
+    "nav-bar": "/components/navBar/navBar"
+  }
 }

pages/test/test.wxml

@@ -1,3 +1,3 @@
 <view>
-  测试页面
+  <nav-bar navbarInfo="{{navbarInfo}}" bind:leftBtn="leftBtn"></nav-bar>
 </view>

pages/userCenter/userCenter.js

@@ -0,0 +1,66 @@
+// pages/userCenter/userCenter.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/userCenter/userCenter.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/userCenter/userCenter.wxml

@@ -0,0 +1,3 @@
+<view>
+  用户中心
+</view>

pages/userCenter/userCenter.wxss

@@ -0,0 +1 @@
+/* pages/userCenter/userCenter.wxss */