微信小程序商城开发之https框架的搭建以及顶部和底部导航的实现

{%20%20%20%20%20%20"pages":%20[%20%20%20%20%20%20%20%20%20%20%20%20"pages/home/home",%20%20%20%20%20%20%20%20%20%20%20%20"pages/cart/cart",%20%20%20%20%20%20%20%20%20%20%20%20"pages/detail/detail",%20%20%20%20%20%20%20%20%20%20%20%20"pages/classify/classify",%20%20%20%20%20%20%20%20%20%20%20%20"pages/mine/mine",%20%20%20%20%20%20%20%20%20%20%20%20"pages/index/index",%20%20%20%20%20%20%20%20%20%20%20%20"pages/logs/logs"%20%20],%20%20%20%20%20%20"window":%20{%20%20%20%20%20%20%20%20"backgroundTextStyle":%20"light",%20%20%20%20%20%20%20%20"navigationBarBackgroundColor":%20"#f0145a",%20%20%20%20%20%20%20%20"navigationBarTitleText":%20"微商城",%20%20%20%20%20%20%20%20"backgroundColor":%20"#f0145a"%20%20},%20%20%20%20%20%20"tabBar":%20{%20%20%20%20%20%20%20%20%20%20%20%20"color":%20"#858585",%20%20%20%20%20%20%20%20%20%20%20%20"selectedColor":%20"#f0145a",%20%20%20%20%20%20%20%20%20%20%20%20"backgroundColor":%20"#ffffff",%20%20%20%20%20%20%20%20%20%20%20%20"borderStyle":%20"#000",%20%20%20%20%20%20%20%20"list":%20[%20%20%20%20%20%20{%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20"pagePath":%20"pages/home/home",%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20"iconPath":%20"images/home.png",                "selectedIconPath": "images/home_select.png",                "text": "首页"      },      {                "pagePath": "pages/classify/classify",                "iconPath": "images/classify.png",                "selectedIconPath": "images/classify_select.png",                "text": "分类"      },      {                "pagePath": "pages/cart/cart",                "iconPath": "images/cart.png",                "selectedIconPath": "images/cart_select.png",                "text": "购物车"      },      {                "pagePath": "pages/mine/mine",                "iconPath": "images/mine.png",                "selectedIconPath": "images/mine_select.png",                "text": "我的"      }    ]  }}

app.wxss

.container {      height: 100%;      display: flex;      flex-direction: column;      align-items: center;      justify-content: space-between;      padding: 200rpx 0;      box-sizing: border-box;}

home.wxml

<!--导航条-->  <view class="navbar">    <text wx:for="{{navbars}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item.navbarName}}</text>  </view>

home.wxss

page{    display: flex;    flex-direction: column;    height: 100%;  }  .navbar{    flex: none;    display: flex;    background: #fff;  }  .navbar .item{    position: relative;    flex: auto;    text-align: center;    line-height: 80rpx;    font-size:14px;}  /* 顶部导航字体颜色 */.navbar .item.active{    color: #f0145a;  }  /* 顶部指示条属性 */.navbar .item.active:after{    content: "";    display: block;    position: absolute;    bottom: 0;    left: 0;    right: 0;    height: 6rpx;    background: #f0145a;  }

home.js

引用ajax和utils公共js

const ajax = require('../../utils/ajax.js');const utils = require('../../utils/util.js');

页面初始化导航数据

data: {        navbars:null,    currentTab: 0,  },

页面初始化加载导航数据函数

/**  * 生命周期函数--监听页面加载  */onLoad: function (options) {        var that = this;        //加载navbar导航条    that.navbarShow();  },

ajax获取导航数据


navbarShow:function(success){        var that = this;    ajax.request({              method: 'GET',              url: 'home/navBar?key=' + utils.key,              success: data => {        that.setData({                      navbars: data.result        })                console.log(data.result)      }    })  },

实现效果如下

相关推荐：

微信小程序购物商城系统开发系列-工具篇

微信开发demo之商城实战开发