微信小程序商城项目之淘宝分类入口(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 相关文章推荐
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 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 分页类(模仿google)-面试题目解答
2009/09/13 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
python制作最美应用的爬虫
2015/10/28 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
python购物车程序简单代码
2018/04/18 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
python实现数字炸弹游戏
2020/07/17 Python
CSS3 简写animation
2012/05/10 HTML / CSS
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
delegate与普通函数的区别
2014/01/22 面试题
2014银行授权委托书样本
2014/10/04 职场文书
保卫工作个人总结
2015/03/03 职场文书
单位实习介绍信
2015/05/05 职场文书
孝女彩金观后感
2015/06/10 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python