推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

查看: 856|回復: 0
打印 上一主題 下一主題

[小程序教程] 微信小程序教程(29) : 微信小程序之側欄分類

  [復制鏈接]
跳轉到指定樓層
樓主
發表于 2018-4-21 16:57:19 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

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

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



布局分析:

<主盒子>

<左盒子></左盒子>

<右盒子></右盒子>

</主盒子>

左盒子使用標準流

右盒子使用絕對定位(top、right)




wxml:

[html] view plain copy


  • <!--主盒子-->  
  • <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:

[css] view plain copy


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

[javascript] view plain copy


  • 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


本版積分規則

關閉

推56站長論壇推薦上一條 /1 下一條

站長QQ
在線咨詢
咨詢熱線
QQ:405327411
站長

QQ|廣告合作|關于我們|聯系我們|免責聲明|網站導航|小黑屋|站長論壇 ( 豫ICP備11018337號-5 )

王寶臣旗下網站 推56論壇(www.fuibch.live)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

Powered by Discuz! X3.4 Licensed

©2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表
3分赛车计划软件 排球比分网即时比分直播 5分快3什么意思 一分11选5怎么回事 皇冠比分网怎么打不开 辽宁11选5分布走势图一定牛 20选5中奖概率 大地棋牌最新版本下载 贵阳微乐麻将开挂辅助 腾讯欢乐捕鱼大战外挂 大庆52麻将手机版 连码是哪些数字 血流麻将胡牌牌型图解