微信小程序商城项目之淘宝分类入口(2)


Posted in Javascript onApril 17, 2017

分类入口,已经成为了商城项目必须的布局之一,这里以仿照淘宝的分类入口来做案例
下图红框部分,就是本文重点讲解部分,另外本文并没有写点击某个入口跳转页面。
如需学习页面跳转的同学,可以参考此文
微信小程序的页面跳转和参数传递 —— 微信小程序教程系列(6)

微信小程序商城项目之淘宝分类入口(2)

页面分析:

使用for循环遍历所有项,插入页面,页面中的项使用左浮动,并使用百分比布局,设置20%的宽度每一项。
这样满5个item后,自动排在下一行

wxml:

<view class="menu-wrp"> 
 <!--设定一个item项后,遍历输出--> 
 <view class="menu-list" wx:for="{{menu.imgUrls}}"> 
  <image class="menu-img" src="{{item}}" /> 
  <view class="menu-desc">{{menu.descs[index]}}</view> 
 </view> 
</view> 
<view class="gap-1"></view>

wxss:

.menu-wrp { 
 width:100%; 
 margin-top:20rpx; 
} 
.menu-wrp:after{ 
  content:""; 
  display:block; 
  clear:both; 
} 
 
.menu-list{ 
  float:left; 
  width:20%; 
  box-sizing: border-box; 
  padding-bottom:10px; 
} 
 
.menu-img{ 
  width:120rpx; 
  height:84rpx; 
  display:block; 
  margin:0 auto; 
  margin-bottom:5px; 
} 
.menu-desc{ 
  background-color:#ffffff; 
  color:#333333; 
  width:100%; 
  text-align: center; 
  display:block; 
  font-size:12px; 
} 
.gap-1,.gap-2{ 
  width:100%; 
  height:10rpx; 
  background:rgb(238, 238, 238); 
}

js:

这里的准备的数据,我直接写在js中,同学们可以改编成通过访问接口来获取

Page({ 
 data: { 
//准备数据 
  menu:{ 
   imgUrls:[ 
    'http://gw.alicdn.com/tps/i2/TB19BluIVXXXXX6XpXXN4ls0XXX-183-129.png?imgtag=avatar', 
    'http://gw.alicdn.com/tps/TB1FDOHLVXXXXcZXFXXXXXXXXXX-183-129.png?imgtag=avatar', 
    'http://gw.alicdn.com/tps/TB1PlmNLVXXXXXEXFXXXXXXXXXX-183-129.png?imgtag=avatar', 
    'http://gw.alicdn.com/tps/TB1RN0HMFXXXXXNXpXXXXXXXXXX-183-129.png?imgtag=avatar', 
    'http://gw.alicdn.com/tps/TB1exaOLVXXXXXeXFXXXXXXXXXX-183-129.png?imgtag=avatar', 
    'http://img.alicdn.com/tps/TB1GzMJLXXXXXXoXXXXXXXXXXXX-183-129.png', 
    'http://gw.alicdn.com/tps/i3/TB1Ewu2KVXXXXXkapXXN4ls0XXX-183-129.png', 
    'http://gw.alicdn.com/tps/TB1cniBJpXXXXataXXXXXXXXXXX-183-129.png?imgtag=avatar', 
    'http://img.alicdn.com/tps/TB1caopLVXXXXaDaXXXXXXXXXXX-183-129.png', 
    'http://gw.alicdn.com/tps/i1/TB1c1FMIpXXXXawXpXXN4ls0XXX-183-129.png?imgtag=avatar' 
   ], 
   descs:[ 
     '聚划算', 
     '天猫', 
     '天猫国际', 
     '外卖', 
     '天猫超市', 
     '充值中心', 
     '阿里旅行', 
     '领金币', 
     '到家', 
     '分类' 
   ] 
  } 
 } 
  
})

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

Javascript 相关文章推荐
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
JavaScript 实现继承的几种方式
Feb 19 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 #Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 #Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 #Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 #Javascript
JS简单验证上传文件类型的方法
Apr 17 #Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 #Javascript
巧用weui.topTips验证数据的实例
Apr 17 #Javascript
You might like
关于PHP中的Class的几点个人看法
2006/10/09 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
js实现购物车功能
2018/06/12 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
Node 代理访问的实现
2019/09/19 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
用python写asp详细讲解
2013/12/16 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
应届毕业生自我鉴定范文
2013/12/27 职场文书
保护环境倡议书500字
2014/05/19 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
销售经理工作检讨书
2015/02/19 职场文书
第一书记观后感
2015/06/08 职场文书
Python Matplotlib库实现画局部图
2021/11/17 Python