微信小程序生鲜果蔬酒类食品首页样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<!--index.wxml-->
<view class="container">
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" duration="{{duration}}" circular="{{circular}}">
    <block wx:for="{{imgUrl}}">
      <swiper-item>
        <image bindload="cusImageLoad" src="{{item}}" class="slide-image" style="width:{{imageWidth}};height:{{imageHeight}}"></image>
      </swiper-item>
    </block>
  </swiper> 
</view>
<view class="headline">
    <view class="headline-img"><image class="headimg" src="{{headImg}}"></image></view>
    <view class="headline-text">缤纷圣诞季，圣诞节礼物送她颜值高的甜蜜礼盒吧</view>
</view>


<!--生鲜-->
<view class="friuts">
      <view class="classifytitle">{{goodclassify[0]}}</view>
      <view class="goodclassifyimg">
            <image class="classifyimg" src="{{goodclassifyimg[0]}}"></image>
      </view>
      <view class="goods">
          <view class="gooditem" wx:for="{{friut}}">
              <view class="goodview">
                  <image class="goodimg" src="{{item.pic}}"></image>
              </view>
              <view class="goodprice">{{item.price}}</view>
              <view class="goodtext">{{item.name}}</view>
          </view>
      </view>
</view>
<!--粮油-->
<view class="grain ">
      <view class="classifytitle">{{goodclassify[1]}}</view>
      <view class="goodclassifyimg">
            <image class="classifyimg" src="{{goodclassifyimg[1]}}"></image>
      </view>
      <view class="goods">
          <view class="gooditem" wx:for="{{grain}}">
              <view class="goodview">
                  <image class="goodimg" src="{{item.pic}}"></image>
              </view>
              <view class="goodprice">{{item.price}}</view>
              <view class="goodtext">{{item.name}}</view>
          </view>
      </view>
</view>
<!--特产-->
<view class="local">
      <view class="classifytitle">{{goodclassify[2]}}</view>
      <view class="goodclassifyimg">
            <image class="classifyimg" src="{{goodclassifyimg[2]}}"></image>
      </view>
      <view class="goods">
          <view class="gooditem" wx:for="{{local}}">
              <view class="goodview">
                  <image class="goodimg" src="{{item.pic}}"></image>
              </view>
              <view class="goodprice">{{item.price}}</view>
              <view class="goodtext">{{item.name}}</view>
          </view>
      </view>
</view>
<!--茶酒-->
<view class="teawine">
      <view class="classifytitle">{{goodclassify[3]}}</view>
      <view class="goodclassifyimg">
            <image class="classifyimg" src="{{goodclassifyimg[3]}}"></image>
      </view>
      <view class="goods">
          <view class="gooditem" wx:for="{{teawine}}">
              <view class="goodview">
                  <image class="goodimg" src="{{item.pic}}"></image>
              </view>
              <view class="goodprice">{{item.price}}</view>
              <view class="goodtext">{{item.name}}</view>
          </view>
      </view>
</view>
<!--进口-->
<view class="imported">
      <view class="classifytitle">{{goodclassify[4]}}</view>
      <view class="goodclassifyimg">
            <image class="classifyimg" src="{{goodclassifyimg[4]}}"></image>
      </view>
      <view class="goods">
          <view class="gooditem" wx:for="{{imported}}">
              <view class="goodview">
                  <image class="goodimg" src="{{item.pic}}"></image>
              </view>
              <view class="goodprice">{{item.price}}</view>
              <view class="goodtext">{{item.name}}</view>
          </view>
      </view>
</view>

<loading hidden="{{hiddening}}">正在加载</loading>

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

/**index.wxss**/

.swiper-item{
  display: block;
}
.slide-image {
  width: 100%;
  display: initial;
}
swiper {
  width: 100%;
}
.headimg{
  display:initial;
}
.headline{
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  font-size: 14px;
  color:#333;
  overflow: hidden;
}
.headline-img{
  float:left;
  width:25%;
  height:22px;
  box-sizing: border-box;
  padding-right:5px;
  border-right:1px solid #808080;
  vertical-align: middle;
}
.headline-text{
  float: left;
  width:75%;
  box-sizing: border-box;
  padding-left: 15px;
  white-space: normal;
  height:16px;
  line-height: 16px;
  margin: 3px 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.classifytitle{
  font-size:14px;
  text-align: center;
  margin-top: 10px;
  padding:10px; 
}
.goodclassifyimg{
   width: 100%;
   min-height: 80px;
}
.classifyimg{
  width: 100%;
  max-height: 80px;
}
.goods{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.gooditem{
  width:33.3333%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
  box-sizing: border-box;
}
.goodview{
  width:3.2rem;
  height:3.2rem;
}
.goodimg{
  width:100%;
  height:100%;
}
.goodprice{
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  margin-top: 5px;
  color:red;
}
.goodtext{
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size:12px;
  padding: 5px 0;
}

三、js页面代码如下：

var WxAutoImage = require('../../js/wxAutoImageCal.js');
var loading = require('../../template/common.js');
//index.js
//获取应用实例

var app = getApp()
Page({
  data: {
    hiddening:true,
    userInfo: {},
    imgUrl:["../../image/1.jpg",
    "../../image/2.jpg",
    "../../image/3.jpg"],
    indicatorDots:true,
    autoplay:true,
    interval:'2000',
    duration:'1000',
    circular:true,
    headImg:"../../image/headline.png",
    goodclassify:["生鲜果蔬","粮油干货","地方特产","名茶名酒","进口食品"],
    goodclassifyimg:["../../image/dining-table-header.jpg",
                      "../../image/grain-dry-cargo-header.jpg",
                      "../../image/local-specialty-header.jpg",
                      "../../image/tea—tobacco-header.jpg",
                      "../../image/imported-food-header.jpg"],
    friut:[
      {"name":"菜心 2kg","pic":"../../image/dining-1.jpg","price":"￥8.9"},
      {"name":"羊肉卷","pic":"../../image/dining-18.jpg","price":"￥21.98"},
      {"name":"安迪山苹果","pic":"../../image/dining-3.jpg","price":"￥8.9"}],
    grain:[
      {"name":"有机石板米","pic":"../../image/grain-1.jpg","price":"￥188.0"},
      {"name":"长寿花金胚玉米油","pic":"../../image/grain-16.jpg","price":"￥208.0"},
      {"name":"龙稻稻花香大米","pic":"../../image/grain-23.jpg","price":"￥96.0"}],
    local:[
      {"name":"振豫臻品腐竹","pic":"../../image/local-1.jpg","price":"￥82.0"},
      {"name":"原味丹堤腰果","pic":"../../image/local-2.jpg","price":"￥398.0"},
      {"name":"精选陕北红枣","pic":"../../image/local-3.jpg","price":"￥83.0"}],
    teawine:[
      {"name":"韩国清河清酒","pic":"../../image/tea-2.jpg","price":"￥82.0"},
      {"name":"特级明前茶","pic":"../../image/tea-3.jpg","price":"￥398.0"},
      {"name":"欢沁桃红葡萄酒","pic":"../../image/tea-4.jpg","price":"￥83.0"},
      {"name":"普洱迷你小沱茶","pic":"../../image/tea-5.jpg","price":"￥82.0"},
      {"name":"忆江南龙井","pic":"../../image/tea-6.jpg","price":"￥82.0"},
      {"name":"欢沁桃红葡萄酒","pic":"../../image/tea-7.jpg","price":"￥82.0"}],
    imported:[
      {"name":"泰国金枕头榴莲","pic":"../../image/imported-1.jpg","price":"￥82.0"},
      {"name":"爱伦蒂全脂纯牛奶","pic":"../../image/imported-2.jpg","price":"￥398.0"},
      {"name":"澳洲混合桉树蜂蜜","pic":"../../image/imported-3.jpg","price":"￥83.0"},
      {"name":"马来西亚白咖啡","pic":"../../image/imported-4.jpg","price":"￥82.0"},
      {"name":"越南白心火龙果 ","pic":"../../image/imported-6.jpg","price":"￥82.0"},
      {"name":"西班牙特级橄榄油","pic":"../../image/imported-39.jpg","price":"￥82.0"}]
  },
  onShareAppMessage:function(){
        return{
          title:"小程序商城",
          desc:"全球最火商城",
          path:"/page/user?id=123"
        }
  },
  cusImageLoad: function(e){
        var that = this;
        that.setData(WxAutoImage.wxAutoImageCal(e));
  },
  tapName: function(event) {
    console.log(event)
  },
  onLoad:function(){
       var that=this;
       this.setData({
           hiddening:false
       })
  },
  onReady:function(){
       var that=this;
       setTimeout(function(){
            that.setData({
              hiddening:true
            })
         console.log('close')                             
        },2000)
  }    
})

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