微信小程序绿色茶叶商城首页样式设计制作开发教程

本文给大家带来的是微信小程序绿色茶叶商城首页样式设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="index-container">
  <swiper indicator-dots="{{lunbo.indicatorDots}}"
  autoplay="{{lunbo.autoplay}}" interval="{{lunbo.interval}}" duration="{{lunbo.duration}}">
    <block wx:for="{{lunbo.imgUrls}}">
      <swiper-item class="lunbo">
        <image src="{{item}}" class="slide-image" mode="" />
      </swiper-item>
    </block>
  </swiper>
  <view class="imageAlw">
    <image  bindtap="bindToSortMenu" class="imageLong" src="/images/indexImages/index1.jpg" ></image>
    <image  bindtap="bindToSortMenu" class="image100" src="/images/indexImages/index2.jpg"></image>
    <image  bindtap="bindToSortMenu" class="image50" src="/images/indexImages/index3.jpg"></image>
    <image  bindtap="bindToSortMenu" class="image50" src="/images/indexImages/index4.jpg"></image>
    <image  bindtap="bindToSortMenu" class="imageLong" src="/images/indexImages/index5.jpg"></image>
  </view>
  <ul class="imageBox" >
    <navigator wx:for="{{imgBox}}" wx:for-item="item" url="/pages/detail/detail?goodId={{item.ProductId}}">
      <li>
        <image src="{{item.ProductImage}}" class="image50"></image>
        <p class="title">{{item.ProductName}}</p>
        <p class="price">￥<span>{{item.ProductSalePrice}}</span></p>
      </li>
    </navigator>
  </ul>
  <image bindtap="bindToSortMenu" style="width:100%;height:26px" src="/images/indexImages/lookMore.jpg"></image>
</view>

二、wxss样式文件代码如下：

.index-container{

}
.lunbo image{
  width: 100%;
}
.imageLong{
  width: 100%;
  height: 60px;
}
.image100{
  width: 100%;
  height: 160px;
}
.image50{
  width: 48%;
  margin: 1%;
  height: 140px;
}
.imageBox {
  display: flex;
  flex-wrap: wrap;
  padding: 4px 4px 4px 0;
}
.imageBox navigator {
  box-sizing: border-box;
  width: 50%;
  padding-left: 4px;
}
.imageBox li{
  width: 100%;
}
.imageBox li image{
  width: 100%;
}
.imageBox li p{
  color:#595758;
  display: block;
  padding: 4px;
}
.imageBox li .price{
  color:#e80806;
}
@media screen and (max-width: 321px) {
  .imageBox li p {
    font-size: 12px;
  }
}

@media screen and (min-width: 322px) and (max-width: 400px) {
  .imageBox li p {
    font-size: 13px;
  }
}

@media screen and (min-width: 400px) {
  .imageBox li p {
    font-size: 14px;
  }
}

三、js页面代码如下：

Page({
  data: {
    lunbo:{
      imgUrls: [
        'http://img1.hecha.cn/MobileImage/20160829/20160829185059303.jpg',
        'http://img1.hecha.cn/MobileImage/20160829/20160829183159678.jpg',
        'http://img1.hecha.cn/MobileImage/20160829/20160829191000772.jpg'
      ],
      indicatorDots: true,
      autoplay: true,
      interval: 4000,
      duration: 300
    },
    imgBox:[]
  },
  onLoad: function () {
    var that = this;
    wx.request({
      url: 'http://localhost:81/mock/index.json',
      header: {
          'Content-Type': 'application/json'
      },
      success: function(res) {
        that.setData({
          imgBox: res.data
        });
      },
      fail: function (error) {
        console.log(error);
      }
    });
  },
  bindToSortMenu: function() {
    wx.navigateTo({
      url: '/pages/sortMenu/sortMenu'
    })
  },
  bindToDetail: function() {
    wx.navigateTo({
      url: '/pages/detail/detail'
    })
  },
});

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