• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

微信小程序之侧栏分类 —— 微信小程序实战商城系列（1）

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

在商场项目中，一般都会有分类页面。

分类页面可以给用户快速找到相关的商品，下面以侧栏分类为例，如下图

 

布局分析：

<主盒子>

<左盒子></左盒子>

<右盒子></右盒子>

</主盒子>

左盒子使用标准流

右盒子使用绝对定位（top、right）

 

 

wxml：

[html] view plain copy
 
 
  1. <!--主盒子-->  
  2. <view class="container">  
  3.   <!--左侧栏-->  
  4.   <view class="nav_left">  
  5.     <block wx:for="{{navLeftItems}}">  
  6.       <!--当前项的id等于item项的id，那个就是当前状态-->  
  7.       <!--用data-index记录这个数据在数组的下标位置，使用data-id设置每个item的id值，供打开2级页面使用-->  
  8.       <view class="nav_left_items {{curNav == item.id ? \'active\' : \'\'}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}">{{item.tree.desc}}</view>  
  9.     </block>  
  10.   </view>  
  11.   <!--右侧栏-->  
  12.   <view class="nav_right">  
  13.     <!--如果有数据，才遍历项-->  
  14.     <view wx:if="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">  
  15.       <block wx:for="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">  
  16.         <view class="nav_right_items">  
  17.           <navigator url="../list/index?brand={{item.tree.id}}&typeid={{navRightItems[curIndex].id}}">  
  18.             <!--用view包裹图片组合，如果有图片就用，无图片提供就使用50x30的这个默认图片-->  
  19.             <view>                
  20.               <block wx:if="{{item.tree.logo}}">  
  21.                 <image src="{{item.tree.logo}}"></image>  
  22.               </block>  
  23.               <block wx:else>  
  24.                 <image src="http://temp.im/50x30"></image>  
  25.               </block>  
  26.             </view>  
  27.             <!--如果有文字，就用文字；无文字就用其他-->  
  28.             <view wx:if="{{item.tree.desc}}">  
  29.               <text>{{item.tree.desc}}</text>  
  30.             </view>  
  31.             <view wx:else>  
  32.               <text>{{item.tree.desc2}}</text>  
  33.             </view>  
  34.           </navigator>  
  35.         </view>  
  36.       </block>  
  37.     </view>  
  38.     <!--如果无数据，则显示数据-->  
  39.     <view wx:else>暂无数据</view>  
  40.   </view>  
  41. </view>  

 

 

 

wxss：

[css] view plain copy
 
 
  1. page{  
  2.   background: #f5f5f5;  
  3. }  
  4. /*总体主盒子*/  
  5. .container {  
  6.   position: relative;  
  7.   width: 100%;  
  8.   height: 100%;  
  9.   background-color: #fff;  
  10.   color: #939393;  
  11. }  
  12.   
  13. /*左侧栏主盒子*/  
  14. .nav_left{  
  15.   /*设置行内块级元素（没使用定位）*/  
  16.   display: inline-block;  
  17.   width: 25%;  
  18.   height: 100%;  
  19.   /*主盒子设置背景色为灰色*/  
  20.   background: #f5f5f5;  
  21.   text-align: center;  
  22. }  
  23. /*左侧栏list的item*/  
  24. .nav_left .nav_left_items{  
  25.   /*每个高30px*/  
  26.   height: 30px;  
  27.   /*垂直居中*/  
  28.   line-height: 30px;  
  29.   /*再设上下padding增加高度，总高42px*/  
  30.   padding: 6px 0;  
  31.   /*只设下边线*/  
  32.   border-bottom: 1px solid #dedede;  
  33.   /*文字14px*/  
  34.   font-size: 14px;  
  35. }  
  36. /*左侧栏list的item被选中时*/  
  37. .nav_left .nav_left_items.active{  
  38.   /*背景色变成白色*/  
  39.   background: #fff;  
  40. }  
  41.   
  42. /*右侧栏主盒子*/  
  43. .nav_right{  
  44.   /*右侧盒子使用了绝对定位*/  
  45.   position: absolute;  
  46.   top: 0;  
  47.   right: 0;  
  48.   flex: 1;  
  49.   /*宽度75%，高度占满，并使用百分比布局*/  
  50.   width: 75%;  
  51.   height: 100%;  
  52.   padding: 10px;  
  53.   box-sizing: border-box;  
  54.   background: #fff;  
  55. }  
  56. /*右侧栏list的item*/  
  57. .nav_right .nav_right_items{  
  58.   /*浮动向左*/  
  59.   float: left;  
  60.   /*每个item设置宽度是33.33%*/  
  61.   width: 33.33%;  
  62.   height: 80px;  
  63.   text-align: center;  
  64. }  
  65. .nav_right .nav_right_items image{  
  66.   /*被图片设置宽高*/  
  67.   width: 50px;  
  68.   height: 30px;  
  69. }  
  70. .nav_right .nav_right_items text{  
  71.   /*给text设成块级元素*/  
  72.   display: block;  
  73.   margin-top: 5px;  
  74.   font-size: 10px;  
  75.   /*设置文字溢出部分为...*/  
  76.   overflow: hidden;  
  77.   white-space: nowrap;  
  78.   text-overflow: ellipsis;  
  79. }  


 

js：

[javascript] view plain copy
 
 
  1. Page({  
  2.     data: {  
  3.         navLeftItems: [],  
  4.         navRightItems: [],  
  5.         curNav: 1,  
  6.         curIndex: 0  
  7.     },  
  8.     onLoad: function() {  
  9.         // 加载的使用进行网络访问，把需要的数据设置到data数据对象  
  10.         var that = this          
  11.         wx.request({  
  12.             url: \'http://huanqiuxiaozhen.com/wemall/goodstype/typebrandList\',  
  13.             method: \'GET\',  
  14.             data: {},  
  15.             header: {  
  16.                 \'Accept\': \'application/json\'  
  17.             },  
  18.             success: function(res) {  
  19.                 console.log(res)  
  20.                 that.setData({  
  21.                     navLeftItems: res.data,  
  22.                     navRightItems: res.data  
  23.                 })  
  24.             }  
  25.         })  
  26.     },  
  27.   
  28.     //事件处理函数  
  29.     switchRightTab: function(e) {  
  30.         // 获取item项的id，和数组的下标值  
  31.         let id = e.target.dataset.id,  
  32.             index = parseInt(e.target.dataset.index);  
  33.         // 把点击到的某一项，设为当前index  
  34.         this.setData({  
  35.             curNav: id,  
  36.             curIndex: index  
  37.         })  
  38.     }  
  39.   
  40. })  

 

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

谢谢观看，不足之处，敬请指导

 

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
小程序版聊天室|聊天小程序|仿微信聊天界面小程序发布时间：2022-07-18
下一篇：
微信小程序（原生）总结发布时间：2022-07-18
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap