首页 > 小程序教程 > 微信小程序米家手机生活商城首页设计制作开发教程

微信小程序米家手机生活商城首页设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序米家手机生活商城首页设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--index.wxml-->
<view class="container">
<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for-items="{{banner_list[0].banner}}">
    <swiper-item>
      <image src="{{item.pic_url}}" class="slide-image" />
    </swiper-item>
  </block>
</swiper>
 <view>
  <view class='menueview' >
   <block wx:for-items="{{banner_list[1].banner}}">
   <image src="{{item.pic_url}}" class="menue-image" />
   </block>
  </view>
 </view>
 <view class='separator'></view>
<view class='floortitle'>
  <view class='floortitlemoreicon'>热卖商品</view>
  <view class='floortitlemoretext'>更多> </view>
</view>
<view class='hotgoodcontainer'>
  <view class='gooditem' wx:for="{{hotgoods}}" wx:for-index="idx" wx:for-item="good">
    <view class='imgview'>
      <image class='productimg' src='{{good.pic_url}}'/>
    </view>
    <view>{{good.name}}</view>
  </view>
</view>
</view>
 
二、wxss样式文件代码如下:
/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

.slide-image{
    display: block;
    height: 150px;
    width:100%
}
.menueview{
  display:flex;
  background-color:#FFF;
  padding:5px 0
}
.menue-image{
  flex:1;
  height:50px;
  height:auto
}
.separator{
 height: 4px;
 width:20rem;
  background-color: #F3F3F3
}
.floortitle{
  display:flex;
  height:34px;
  align-items:center;
  justify-content:space-between;
  padding:0 13px;
  font-size:14px;
  color:rgba(0,0,0,0.7);
  border-bottom: 1px solid #e2e2e3
}
.hotgoodcontainer{
    display:flex;
    flex-wrap: wrap;
    width:100%;
}
.gooditem{
    width:33.333333%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    font-size:12px;
    box-sizing:border-box;
    border: 0.5px solid #e2e2e3;
    padding-bottom:10px
}
.productimg{
   width:80px;
   height:80px;
}
.imgview{
  width:80px;
  height:80px;
}
三、js页面代码如下:
//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'MiHome_Store',
    userInfo: {},
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 100,
    "banner_list": [
      {
        "banner": [
          {
            "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_904608692a4d8415d0de39a0a5897e80.jpeg&w=1080&h=600&crop=a_0_120_1080_480&t=webp&z=1.15&q=78",
          },
          {
            "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_0f5e43035a8b8d27a4b6f315d222fd9b.jpeg&w=1080&h=600&crop=a_0_120_1080_480&t=webp&z=1.15&q=78",
          },
          {
            "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_4ba3d814639ab27570f174467133619f.png&w=1080&h=600&crop=a_0_120_1080_480&t=webp&z=1.15&q=78",
          },
          {
            "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_91f29509f14ea243958285aaf5d5b640.jpeg&w=1080&h=600&crop=a_0_120_1080_480&t=webp&z=1.15&q=78",
          },
          {
            "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_5c752db8097555831469356f5f389078.jpeg&w=1080&h=600&crop=a_0_120_1080_480&t=webp&z=1.15&q=78",
          }
        ]
      },
      {
        "banner": [
          {
            "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_3237b46c5de819816125d88e9d06b7bf.jpg&crop=a_0_120_1080_480&t=webp&z=1.15&q=78",
          },
          {
            "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_c02bce3048058edb194dc3efb230d06b.jpg&crop=a_0_120_1080_480&t=webp&z=1.15&q=78",
          },
          {
            "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_45b3c9ed56aef44994176b50ae5d8a69.jpg&crop=a_0_120_1080_480&t=webp&z=1.15&q=78",
          },
          {
            "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_95583f54ee857e8fa5f4cf1b9f791a74.jpg&crop=a_0_120_1080_480&t=webp&z=1.15&q=78",

          }
        ]
      }
    ],
    hotgoods: [
      {
        "name": "90分轻薄羽绒服",
        "summary": "防钻绒工艺,保暖更锁温,备好深秋暖意",
        "ext_tag": "http://static.home.mi.com/app/shop/img?id=shop_9d57f6e89d1f560b7bce31e0b85a7285.png&w=420&h=240&crop=a_0_120_1080_480&t=png",
        "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_48ebe9e693ade1766877e0f8adf425f7.png&w=420&h=240&crop=a_90_0_240_240"
      },
      {
        "name": "红米Note 3",
        "summary": "金属机身,指纹解锁,4000mAh大电池",
        "ext_tag": "http://static.home.mi.com/app/shop/img?id=shop_d65477ca8db6626da323554e132d7de9.png&w=420&h=240&crop=a_0_120_1080_480&t=png",
        "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_c2cf209c66a22818c7f5c269f6bbff12.jpeg&w=420&h=240&crop=a_90_0_240_240",
        "url": "http://home.mi.com/shop/detail?gid=95"
      },
      {
        "name": "小米手机5",
        "summary": "骁龙820处理器,4轴防抖相机",
        "ext_tag": "http://static.home.mi.com/app/shop/img?id=shop_34699befd5c2de3a028eb987fea574e9.png&w=420&h=240&crop=a_0_120_1080_480&t=png",
        "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_8dec2f08e5dd9d08b440f77a36e39e16.png&w=420&h=240&crop=a_90_0_240_240"
      },
      {
        "name": "小米Max",
         "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_35a026ff12d476496f91d121911af0ce.jpg&crop=a_90_0_240_240",
        "summary": "6.44寸大屏黄金尺寸,买赠智能显示保护套",
        "ext_tag": "http://static.home.mi.com/app/shop/img?id=shop_86f01fa8cea034deb1dce44c0385baab.png&w=420&h=240&crop=a_0_120_1080_480&t=png"
      },
      {
        "name": "最生活毛巾",
        "summary": "精选阿瓦提长绒棉,瑞典抗菌科技,3条/包",
        "ext_tag": "http://static.home.mi.com/app/shop/img?id=shop_26beb8c609406d060c57b7cdc9d2627f.png&w=420&h=240&crop=a_0_120_1080_480&t=png",
        "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_1e29af11fa83139dd305d61cb83c94ac.jpeg&w=420&h=240&crop=a_90_0_240_240"
      },
      {
        "name": "小米空气净化器 2",
        "summary": "全新空气增压系统,净化性能高达 310m³/h",
        "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_0b23f4b364ee73bc86b280cc7397638c.jpg&w=420&h=240&crop=a_90_0_240_240"
      }
    ]
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function (userInfo) {
      //更新数据
      that.setData({
        userInfo: userInfo
      })
      that.update()
    })
  }
})

模板简介:该模板名称为【微信小程序米家手机生活商城首页设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 22,796次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-23
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
Bootstrap html5 单页式简历模板 表格式简历模板 微信公众平台 自适应 微信文章 企业网站 响应式 微信模板
您可能会喜欢的其他模板