E企盈营销工具技术服务商 热线:4006-838-530

微信小程序之Index(仿淘宝分类入口)

E企盈直播平台营销卖货系统

1.逻辑层index.js//index.js//获取应用实例const app = getApp()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: [        ‘聚划算’,        ‘天猫’,        ‘天猫国际’,        ‘外卖’,        ‘天猫超市’,        ‘充值中心’,        ‘阿里旅行’,        ‘领金币’,        ‘到家’,        ‘分类’      ]    }  },  /**   * 生命周期函数–监听页面加载   */  onLoad: function (options) {  }})2.页面布局index.wxml<!–index.wxml–><view class=”menu-wrp”>    <!–设定一个item项后,遍历输出–>    <view class=”menu-list” wx:for=”{{menu.imgUrls}}” wx:key=”id”>      <image class=”menu-img” src=”{{item}}” />      <view class=”menu-desc”>{{menu.descs[index]}}</view>    </view>  </view>  <view class=”gap-1″></view>3.样式index.wxss/**index.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);}4.效果图

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序之Index(仿淘宝分类入口)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏