微信小程序之側欄分類 —— 微信小程序實戰商城系列（1）

在商場項目中，一般都會有分類頁面。

分類頁面可以給用戶快速找到相關的商品，下面以側欄分類為例，如下圖

 

布局分析：

<主盒子>

<左盒子></左盒子>

<右盒子></右盒子>

</主盒子>

左盒子使用標准流

右盒子使用絕對定位（top、right）

 

 

wxml：

<!--主盒子-->
<view class="container">
  <!--左側欄-->
  <view class="nav_left">
    <block wx:for="{{navLeftItems}}">
      <!--當前項的id等於item項的id，那個就是當前狀態-->
      <!--用data-index記錄這個數據在數組的下標位置，使用data-id設置每個item的id值，供打開2級頁面使用-->
      <view class="nav_left_items {{curNav == item.id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}">{{item.tree.desc}}</view>
    </block>
  </view>
  <!--右側欄-->
  <view class="nav_right">
    <!--如果有數據，才遍歷項-->
    <view wx:if="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">
      <block wx:for="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">
        <view class="nav_right_items">
          <navigator url="../list/index?brand={{item.tree.id}}&typeid={{navRightItems[curIndex].id}}">
            <!--用view包裹圖片組合，如果有圖片就用，無圖片提供就使用50x30的這個默認圖片-->
            <view>
              <block wx:if="{{item.tree.logo}}">
                <image src="{{item.tree.logo}}"></image>
              </block>
              <block wx:else>
                <image src="http://temp.im/50x30"></image>
              </block>
            </view>
            <!--如果有文字，就用文字；無文字就用其他-->
            <view wx:if="{{item.tree.desc}}">
              <text>{{item.tree.desc}}</text>
            </view>
            <view wx:else>
              <text>{{item.tree.desc2}}</text>
            </view>
          </navigator>
        </view>
      </block>
    </view>
    <!--如果無數據，則顯示數據-->
    <view wx:else>暫無數據</view>
  </view>
</view>

 

 

 

wxss：

page{
  background: #f5f5f5;
}
/*總體主盒子*/
.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  color: #939393;
}

/*左側欄主盒子*/
.nav_left{
  /*設置行內塊級元素（沒使用定位）*/
  display: inline-block;
  width: 25%;
  height: 100%;
  /*主盒子設置背景色為灰色*/
  background: #f5f5f5;
  text-align: center;
}
/*左側欄list的item*/
.nav_left .nav_left_items{
  /*每個高30px*/
  height: 30px;
  /*垂直居中*/
  line-height: 30px;
  /*再設上下padding增加高度，總高42px*/
  padding: 6px 0;
  /*只設下邊線*/
  border-bottom: 1px solid #dedede;
  /*文字14px*/
  font-size: 14px;
}
/*左側欄list的item被選中時*/
.nav_left .nav_left_items.active{
  /*背景色變成白色*/
  background: #fff;
}

/*右側欄主盒子*/
.nav_right{
  /*右側盒子使用了絕對定位*/
  position: absolute;
  top: 0;
  right: 0;
  flex: 1;
  /*寬度75%，高度占滿，並使用百分比布局*/
  width: 75%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
}
/*右側欄list的item*/
.nav_right .nav_right_items{
  /*浮動向左*/
  float: left;
  /*每個item設置寬度是33.33%*/
  width: 33.33%;
  height: 80px;
  text-align: center;
}
.nav_right .nav_right_items image{
  /*被圖片設置寬高*/
  width: 50px;
  height: 30px;
}
.nav_right .nav_right_items text{
  /*給text設成塊級元素*/
  display: block;
  margin-top: 5px;
  font-size: 10px;
  /*設置文字溢出部分為...*/
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

 

js：

Page({
    data: {
        navLeftItems: [],
        navRightItems: [],
        curNav: 1,
        curIndex: 0
    },
    onLoad: function() {
        // 加載的使用進行網絡訪問，把需要的數據設置到data數據對象
        var that = this
        wx.request({
            url: 'http://huanqiuxiaozhen.com/wemall/goodstype/typebrandList',
            method: 'GET',
            data: {},
            header: {
                'Accept': 'application/json'
            },
            success: function(res) {
                console.log(res)
                that.setData({
                    navLeftItems: res.data,
                    navRightItems: res.data
                })
            }
        })
    },

    //事件處理函數
    switchRightTab: function(e) {
        // 獲取item項的id，和數組的下標值
        let id = e.target.dataset.id,
            index = parseInt(e.target.dataset.index);
        // 把點擊到的某一項，設為當前index
        this.setData({
            curNav: id,
            curIndex: index
        })
    }

})

 

demo地址：http://download.csdn.net/detail/michael_ouyang/9816426

 

更多小程序的教程

 

 

微信開發者工具的快捷鍵

微信小程序的文件結構 —— 微信小程序教程系列（1）

微信小程序的生命周期實例演示 —— 微信小程序教程系列（2）

微信小程序的動態修改視圖層的數據 —— 微信小程序教程系列（3）

微信小程序的新建頁面 —— 微信小程序教程系列（4）

微信小程序的如何使用全局屬性 —— 微信小程序教程系列（5）

微信小程序的頁面跳轉 —— 微信小程序教程系列（6）

微信小程序標題欄和導航欄的設置 —— 微信小程序教程系列（7）

微信小程序的作用域和模塊化 —— 微信小程序教程系列（8）

微信小程序視圖層的數據綁定 —— 微信小程序教程系列（9）

微信小程序視圖層的條件渲染 —— 微信小程序教程系列（10）

微信小程序視圖層的列表渲染 —— 微信小程序教程系列（11）

微信小程序視圖層的模板 —— 微信小程序教程系列（12）

微信小程序wxss的尺寸單位rpx —— 微信小程序教程系列（13）

微信小程序的網絡請求 —— 微信小程序教程系列（14）

微信小程序的百度地圖獲取地理位置 —— 微信小程序教程系列（15）

微信小程序使用百度api獲取天氣信息 —— 微信小程序教程系列（16）

微信小程序獲取系統日期和時間 —— 微信小程序教程系列（17）

微信小程序之頂部導航欄實例 —— 微信小程序實戰系列（1）

微信小程序之上拉加載（分頁加載）實例 —— 微信小程序實戰系列（2）

微信小程序之輪播圖實例 —— 微信小程序實戰系列（3）

微信小程序之仿android fragment之可滑動的底部導航欄實例 —— 微信小程序實戰系列（4）

 

微信小程序之登錄頁實例 —— 微信小程序實戰系列（5）

微信小程序之自定義toast實例 —— 微信小程序實戰系列（6）

微信小程序之自定義抽屜菜單（從下拉出）實例 —— 微信小程序實戰系列（7）

微信小程序之自定義模態彈窗（帶動畫）實例 —— 微信小程序實戰系列（8）

 

更多小程序的教程請查看：http://blog.csdn.net/michael_ouyang/article/details/54700871

謝謝觀看，不足之處，敬請指導