商城小程序左側(cè)欄分類如何開發(fā)

本文小編為大家詳細(xì)介紹“商城小程序左側(cè)欄分類如何開發(fā)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“商城小程序左側(cè)欄分類如何開發(fā)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

如下圖

今天我們就來看看商城分類項(xiàng)目開發(fā)需要哪些？

布局分析：

<主盒子>

<左盒子></左盒子>

<右盒子></右盒子>

</主盒子>

左盒子使用標(biāo)準(zhǔn)流

右盒子使用絕對(duì)定位（top、right）

小程序如下圖所示：

相關(guān)源碼

.wxml

<!--主盒子-->  

<view class="container">  

  <!--左側(cè)欄-->  

  <view class="nav_left">  

    <block wx:for="{{navLeftItems}}">  

      <!--當(dāng)前項(xiàng)的id等于item項(xiàng)的id，那個(gè)就是當(dāng)前狀態(tài)-->  

      <!--用data-index記錄這個(gè)數(shù)據(jù)在數(shù)組的下標(biāo)位置，使用data-id設(shè)置每個(gè)item的id值，供打開2級(jí)頁面使用-->  

      <view class="nav_left_items {{curNav == item.id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}">{{item.tree.desc}}</view>  

    </block>  

  </view>  

  <!--右側(cè)欄-->  

  <view class="nav_right">  

    <!--如果有數(shù)據(jù)，才遍歷項(xiàng)-->  

    <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的這個(gè)默認(rèn)圖片-->  

            <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>  

    <!--如果無數(shù)據(jù)，則顯示數(shù)據(jù)-->  

    <view wx:else>暫無數(shù)據(jù)</view>  

  </view>  

</view>  

.wxss

page{  

  background: #f5f5f5;  

}  

/*總體主盒子*/  

.container {  

  position: relative;  

  width: 100%;  

  height: 100%;  

  background-color: #fff;  

  color: #939393;  

}  

/*左側(cè)欄主盒子*/  

.nav_left{  

  /*設(shè)置行內(nèi)塊級(jí)元素（沒使用定位）*/  

  display: inline-block;  

  width: 25%;  

  height: 100%;  

  /*主盒子設(shè)置背景色為灰色*/  

  background: #f5f5f5;  

  text-align: center;  

}  

/*左側(cè)欄list的item*/  

.nav_left .nav_left_items{  

  /*每個(gè)高30px*/  

  height: 30px;  

  /*垂直居中*/  

  line-height: 30px;  

  /*再設(shè)上下padding增加高度，總高42px*/  

  padding: 6px 0;  

  /*只設(shè)下邊線*/  

  border-bottom: 1px solid #dedede;  

  /*文字14px*/  

  font-size: 14px;  

}  

/*左側(cè)欄list的item被選中時(shí)*/  

.nav_left .nav_left_items.active{  

  /*背景色變成白色*/  

  background: #fff;  

}  

/*右側(cè)欄主盒子*/  

.nav_right{  

  /*右側(cè)盒子使用了絕對(duì)定位*/  

  position: absolute;  

  top: 0;  

  right: 0;  

  flex: 1;  

  /*寬度75%，高度占滿，并使用百分比布局*/  

  width: 75%;  

  height: 100%;  

  padding: 10px;  

  box-sizing: border-box;  

  background: #fff;  

}  

/*右側(cè)欄list的item*/  

.nav_right .nav_right_items{  

  /*浮動(dòng)向左*/  

  float: left;  

  /*每個(gè)item設(shè)置寬度是33.33%*/  

  width: 33.33%;  

  height: 80px;  

  text-align: center;  

}  

.nav_right .nav_right_items image{  

  /*被圖片設(shè)置寬高*/  

  width: 50px;  

  height: 30px;  

}  

.nav_right .nav_right_items text{  

  /*給text設(shè)成塊級(jí)元素*/  

  display: block;  

  margin-top: 5px;  

  font-size: 10px;  

  /*設(shè)置文字溢出部分為...*/  

  overflow: hidden;  

  white-space: nowrap;  

  text-overflow: ellipsis;  

}  

.js

Page({  

    data: {  

        navLeftItems: [],  

        navRightItems: [],  

        curNav: 1,  

        curIndex: 0  

    },  

    onLoad: function() {  

        // 加載的使用進(jìn)行網(wǎng)絡(luò)訪問，把需要的數(shù)據(jù)設(shè)置到data數(shù)據(jù)對(duì)象  

        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  

                })  

            }  

        })  

    },  

    //事件處理函數(shù)  

    switchRightTab: function(e) {  

        // 獲取item項(xiàng)的id，和數(shù)組的下標(biāo)值  

        let id = e.target.dataset.id,  

            index = parseInt(e.target.dataset.index);  

        // 把點(diǎn)擊到的某一項(xiàng)，設(shè)為當(dāng)前index  

        this.setData({  

            curNav: id,  

            curIndex: index  

        })  

    }  

})  

讀到這里，這篇“商城小程序左側(cè)欄分類如何開發(fā)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。