首页热门产品

app.json

@@ -11,6 +11,7 @@
     "pages/login/index",
     "pages/unpassword/index",
     "pages/register/index",
+    "pages/messageInfo/index",
     "pages/test/index",
     "pages/logs/logs"
 

commpents/navbar/navbar.js

@@ -31,7 +31,9 @@ Component({
       wx.navigateBack()
     },
     _navbackMess() {
-      console.log('消息中心');
+      wx.navigateTo({
+        url: '/pages/messageInfo/index'
+      })
     },
     //返回到首页
     _backhome() {

pages/home/index.js

@@ -9,16 +9,29 @@ Page({
     // 组件所需的参数
     nvabarData: {
       showCapsule: 1, //是否显示左上角图标，消息中心   1表示显示    0表示不显示
-      showBack: 0,//返回
+      showBack: 0, //返回
       title: '我的主页', //导航栏 中间的标题
+      // 此页面 页面内容距最顶部的距离
+      height: app.globalData.height * 2 + 20,
     },
     // 此页面 页面内容距最顶部的距离
-    height: app.globalData.height * 2 + 20,
+
     active: 0,
     icon: {
       normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
       active: 'https://img.yzcdn.cn/vant/user-active.png'
     },
+    // 热门产品
+    productList: [{
+        "pic": '/pages/images/cooperation01.png',
+        title: '热门产品'
+      },
+      {
+        "pic": '/pages/images/cooperation01.png',
+        title: '热门产品'
+      }
+    ],
+    // 政策解读
     policyList: [{
         "pic": "/pages/images/test.jpg",
         "title": "中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》中国银保监会就《商业银行小微企业金融服务监管评价暂行办法（试行）》",
@@ -44,6 +57,7 @@ Page({
         "dengji": "吉林省"
       },
     ],
+    // 轮播
     background: [{
         "pic": "/pages/images/test1.png",
       },

pages/home/index.wxml

@@ -21,12 +21,10 @@
 			</view>
 			<view class="mainTwo">
 				<span class="title">热门产品</span>
-				<view class="list">
-					<view class="listOne">
-						图片一
-					</view>
-					<view class="listOne listTwo">
-						图片二
+				<view class="list" wx:key="unique" wx:for="{{productList}}" wx:for-item="item">
+					<view bindtap="productListDetail" id="{{list._id}}">
+						<image src="{{item.pic}}"></image>
+						<text>{{item.title}}</text>
 					</view>
 				</view>
 			</view>

pages/home/index.wxss

@@ -84,21 +84,38 @@
 
 .main .mainTwo .list {
   float: left;
-  width: 100%;
+  width: 335rpx;
   height: 108rpx;
+  margin: 0 20rpx 0 0;
+  background: rgba(151, 93, 255, 1);
+  border-radius: 20rpx;
+  position: relative;
 }
 
-.main .mainTwo .list .listOne {
+.main .mainTwo .list:last-child {
+  background: rgba(30, 219, 233, 1);
+  margin: 0;
+}
+
+.main .mainTwo .list image {
   float: left;
-  width: 325rpx;
+  width: 100%;
   height: 108rpx;
-  background: rgba(151, 93, 255, 1);
-  border-radius: 20rpx;
-  margin: 0 20rpx 0 0;
 }
 
-.main .mainTwo .list .listTwo {
-  background: rgba(30, 219, 233, 1);
+.main .mainTwo .list text {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  left: 0;
+  color: #fff;
+  background: #cccccc5f;
+  height: 108rpx;
+  border-radius: 20rpx;
+  text-align: center;
+  line-height: 108rpx;
+  font-weight: bold;
+
 }
 
 .mainThree {

pages/messageInfo/index.js

@@ -0,0 +1,73 @@
+// pages/messageInfo/index.js
+const app = getApp()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    nvabarData: {
+      showCapsule: 0, //是否显示左上角图标，消息中心   1表示显示    0表示不显示
+      showBack: 1, //返回
+      title: '消息中心', //导航栏 中间的标题
+      // 此页面 页面内容距最顶部的距离
+      height: app.globalData.height * 2 + 20,
+    },
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/messageInfo/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "nav-bar": "/commpents/navbar/navbar"
+  }
+}

pages/messageInfo/index.wxml

@@ -0,0 +1,6 @@
+<nav-bar navbar-data='{{nvabarData}}'></nav-bar>
+<view class="home">
+	<view class="main">
+		列表
+	</view>
+</view>

pages/messageInfo/index.wxss

@@ -0,0 +1 @@
+/* pages/messageInfo/index.wxss */