脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序商城分类入口

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

 更新时间：2022年05月22日 07:46:05   作者：michael_ouyang  
这篇文章主要为大家详细介绍了微信小程序实战商城系列之淘宝分类入口，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

页面分析：

使用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封闭函数及常用内置对象示例

    JavaScript封闭函数及常用内置对象示例

    这篇文章主要介绍了JavaScript封闭函数及常用内置对象,结合实例形式分析了JavaScript封闭函数及常用内置对象的定义与简单使用相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • Underscore源码分析

    Underscore源码分析

    Underscore 是一个 JavaScript 工具库，它提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象。这篇文章主要介绍了underscore源码分析相关知识，感兴趣的朋友一起学习吧
    2015-12-12
  • JS截取数组操作简单示例

    JS截取数组操作简单示例

    这篇文章主要给大家介绍了关于JS截取数组操作的相关资料,对数组的操作相信大家都不陌生,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • Javascript拖拽系列文章1之offsetParent属性

    Javascript拖拽系列文章1之offsetParent属性

    这个系列文章主要是讲述实现Javascript拖拽功能的基础知识，并将在最后给出一个完整的示例。适合对拖拽完全不懂的人阅读
    2008-09-09
  • 利用JavaScript获取用户IP属地方法详解

    利用JavaScript获取用户IP属地方法详解

    最近很多平台都上线了显示用户的位置信息的功能，那么这是如何做到的， 据说这个位置信息的准确性在通信网络运营商那里？本文将来探究一下
    2022-05-05
  • JavaScript通过元素的ID和name设置样式

    JavaScript通过元素的ID和name设置样式

    这篇文章主要介绍了JavaScript通过元素的ID和name设置其样式，下面有个不错的示例，感兴趣的朋友可以测试下
    2014-07-07
  • js中利用cookie实现记住密码功能

    js中利用cookie实现记住密码功能

    这篇文章主要为大家详细介绍了js中利用cookie实现记住密码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 微信小程序如何实现全局重新加载

    微信小程序如何实现全局重新加载

    这篇文章主要给大家介绍了关于微信小程序如何实现全局重新加载的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-06-06
  • 在JavaScript中模拟类(class)及类的继承关系

    在JavaScript中模拟类(class)及类的继承关系

    众所周知,JavaScript中没有类,然而我们却可以动手实现一个拥有继承特性的类,所以接下来我们要讨论的便是在JavaScript中模拟类(class)及类的继承关系:
    2016-05-05
  • JavaScript必知必会(九）function 说起 闭包问题

    JavaScript必知必会(九）function 说起 闭包问题

    这篇文章主要介绍了JavaScript必知必会(九）function 说起 闭包问题的相关资料,需要的朋友可以参考下
    2016-06-06

最新评论