微信小程序商城项目之侧栏分类效果(1)


Posted in Javascript onApril 17, 2017

在商场项目中,一般都会有分类页面。
分类页面可以给用户快速找到相关的商品,下面以侧栏分类为例,如下图

微信小程序商城项目之侧栏分类效果(1)

布局分析:

<主盒子>
<左盒子>
<右盒子>

左盒子使用标准流
右盒子使用绝对定位(top、right)

微信小程序商城项目之侧栏分类效果(1)

wxml:

<!--主盒子--> 
<view class="container"> 
 <!--左侧栏--> 
 <view class="nav_left"> 
 <block wx:for="{{navLeftItems}}"> 
 <!--当前项的id等于item项的id,那个就是当前状态--> 
 <!--用data-index记录这个数据在数组的下标位置,使用data-id设置每个item的id值,供打开2级页面使用--> 
 <view bindtap="switchRightTab" class="nav_left_items {{curNav == item.id ? 'active' : ''}}" data-id="{{item.id}}" data-index="{{index}}">{{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}}&amp;typeid={{navRightItems[curIndex].id}}"> 
  <!--用view包裹图片组合,如果有图片就用,无图片提供就使用50x30的这个默认图片--> 
  <view>  
  <block wx:if="{{item.tree.logo}}"> 
  <img src="{{item.tree.logo}}" /> 
  </block> 
  <block wx:else=""> 
  <img src="http://temp.im/50x30" /> 
  </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 
 }) 
 } 
 
})

 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript事件热键兼容ie|firefox
Dec 30 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
jquery iframe操作详细解析
Nov 20 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 #Javascript
JS简单验证上传文件类型的方法
Apr 17 #Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 #Javascript
巧用weui.topTips验证数据的实例
Apr 17 #Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 #jQuery
bootstrap select插件封装成Vue2.0组件
Apr 17 #Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 #Javascript
You might like
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
php中使用GD库做验证码
2016/03/31 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
js对象数组按属性快速排序
2011/01/31 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Python实现京东秒杀功能代码
2019/05/16 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
数字漫画:comiXology
2020/06/13 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
国庆节文艺活动方案
2014/02/03 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
美容院合作经营协议书
2014/10/10 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
MySQL分布式恢复进阶
2022/07/23 MySQL