微信小程序手机出售商城首页展示样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<!--index.wxml-->
<view class="container">
  <scroll-view class="scroll-container" upper-threshold="{{sortPanelDist}}" bindscroll="onToTop" scroll-y="true" style="height:calc(100% - 1px)">
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="swiper-height">
        <block wx:for="{{imgUrls}}">
            <swiper-item>
                <image src="{{item}}" class="slide-image" style="height:{{windowWidth * 0.375}}px !important"/>
            </swiper-item>
        </block>
    </swiper>
    <view class="category-panel">
        <view class="category-item">
            <image class="category-item-image" src="../resources/images/ic_index_tab_kind.png" />
            <text class="category-item-text">分类</text>
        </view>
        <view class="category-item">
            <image class="category-item-image" src="../resources/images/ic_index_tab_ten.png" />
            <text class="category-item-text">优选</text>
        </view>
        <view class="category-item">
            <image class="category-item-image" src="../resources/images/ic_index_tab_share.png" />
            <text class="category-item-text">晒单</text>
        </view>
        <view class="category-item">
            <image class="category-item-image" src="../resources/images/ic_index_tab_qa.png" />
            <text class="category-item-text">常见问题</text>
        </view>
    </view>
   
    <view class="sort-panel" style="position:{{sortPanelPos}};top:{{sortPanelTop}}px">
        <view class="sort-item">人气</view>
        <view class="sort-item">最新</view>
        <view class="sort-item">进度</view>
        <view class="sort-item comb on">
            <view class="comb-text">限时秒杀</view>
            <view class="comb-arrs down">
                <image class="comb-arr-up" src=""></image>
                <image class="comb-arr-down" src=""></image>
            </view>
        </view>
    </view>
    <view class="goods-panel">
        <import src="tpl/goodsList.wxml"/>
        <template is="goodsList" data="{{goodsList:goodsList}}"/>
    </view>
  </scroll-view>
  <view class="tabbar-border"></view>
</view>

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

.container {
    width: 100%;
    padding:0;
    margin: 0;
    background-color: #fff;
}
.scroll-container{
    width:100%;
}
.swiper-height{
    height: 120px;
}
.tabbar-border{
    width:100%;
    height:1px;
    position: fixed;
    bottom: 0;
    background-color: #ccc;
}
.slide-image{
    width:100%;
}
.category-panel{
    height:90px;
    width:100%;
    display:flex;
    color:#666666;
    flex-direction:row;
    font-size:11px;
    justify-content: space-around;
    border-bottom: 1px solid #f1eeec;
}
.category-item{
    display:flex;
    width:60px;
    text-align: center;
    flex-direction:column;
}
.category-item-image{
    width:36px;
    height:36px;
    overflow:unset;
    padding:15px 12px 0 12px
}
.category-item-text{
    padding:10px 0;
}
.notice-panel{
    width:100%;
    height:50px;
    display:flex;
    flex:none;
    flex-direction:row;
    border-bottom: 10px solid #e8e8e8;
}
.notice-image{
    height: 20px;
    min-width:20px;
    max-width:20px;
    padding: 10px 10px 10px 20px;
}
.notice-message{
    font-size: 12px;
    color: #666666;
    word-break:normal;
    overflow : hidden;
    word-wrap: normal;
    line-height: 40px;
    padding-right:20px;
}
.sort-panel{
    width:100%;
    height: 45px;
    display:flex;
    z-index: 1000;
    flex-direction: row;
    justify-content: space-around;
    border-bottom: 1px solid #e8e8e8;
    background-color: rgba(255, 255, 255, 0.96);
}
.sort-item{
    width:68px;
    height: 23px;
    color: #545454;
    font-size:13px;
    text-align: center;
    padding-top:13px;
}
.sort-item.on{
    color: #db3652;
    border-bottom: 2px solid #db3652;
}

.sort-item.comb{
    display:flex;
    flex-direction: row;
}

.comb-arrs {
    display:flex;
    padding: 3px 0 0 3px;
    flex-direction: column;
}
.comb-arr-up, .comb-arr-down{
    width: 11px;
    height: 6px;
    background-size:cover;
}

.comb-arr-up{
    background-image:url(../../resources/images/ic_arr_up.png);
}

.comb-arr-down{
    margin-top:1px;
    background-image:url(../../resources/images/ic_arr_down.png); 
}

.comb-arrs.up .comb-arr-up{
    background-image:url(../../resources/images/ic_arr_up_selected.png);
}

.comb-arrs.up .comb-arr-down{
    background-image:url(../../resources/images/ic_arr_down.png);
}

.comb-arrs.down .comb-arr-up{
    background-image:url(../../resources/images/ic_arr_up.png);
}

.comb-arrs.down .comb-arr-down{
    background-image:url(../../resources/images/ic_arr_down_selected.png);
}
.goods-panel{
    display: flex;
    flex-wrap:wrap;
}
.goods-panel .goods-item{
    width: 49%;
    height: 220px;
    border-bottom:1px solid #e8e8e8;
}

.goods-item.odd{
    border-right:1px solid #e8e8e8;
}
.goods-item .goods{
    position: relative;
}
.goods {
    font-size: 14px;
    color: #262626;
    height: 180px;
    text-align: center;
}
.goods .goods-tag{
    position: absolute;
}
.goods .goods-image{
    width:140px;
    height: 140px;
}
.goods .desc-wrapper{
    height: 2.5em;
    display: table;
}
.desc-wrapper .goods-desc{
    height: 2.5em;
    overflow: hidden;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.25em;
    padding: 0 5px 0 10px;
}
.goods-item .operating{
    position: relative;
    display: flex;
    flex-direction: row;
    font-size: 11px;
    color: #e6324a;
    height: 40px;
    padding: 10px 10px 4px;
}
.operating .btn {
    width: 56px;
    height: 26px;
    right: 5px;
    border-radius: 4px;
    position: absolute;
    line-height: 26px;
    text-align: center;
    border:1px solid #e6324a;
}
.operating .progress{
    height: 5px;
    margin-top:20px;
    margin-right:5px;
    border-radius: 5px;
    position: absolute;
    background-color: #e8e8e8;
}
.operating .progress-take{
    height: 5px;
    margin-top:20px;
    margin-right:5px;
    border-radius: 5px;
    position: absolute;
    background-color: #ffc63c;
}
.operating .tips{
    height:12px;
    color: #686868;
    font-size: 11px;
    line-height: 12px;
    position: absolute;
}
.tips span{
    color: #007aff;
    padding-left: 2px;
}

三、js页面代码如下：

var app = getApp()
Page( {
  onShareAppMessage: function () {
    return {
      title: '快把帅超分享给你的朋友吧',
      path: '/page/user?id=123',
      success: function(res) {
        // 分享成功
      },
      fail: function(res) {
        // 分享失败
      }
    }
  },
  data: {
    imgUrls: [
      'https://m.360buyimg.com/mobilecms/s720x322_jfs/t5047/55/1037153378/224853/6a23df83/58ec53d9N6c21708c.jpg!q70.jpg',
      'https://img1.360buyimg.com/da/jfs/t4783/171/280173974/67361/d821e7d3/58de2d17N2747032e.jpg',
      'https://img1.360buyimg.com/da/jfs/t5005/210/1101202078/96005/511b696b/58eca38eN686c041a.jpg',
      'https://m.360buyimg.com/mobilecms/s720x322_jfs/t5056/28/1233616393/72169/bb1adbf2/58eed7e5Nc4698c8d.jpg!q70.jpg',
      'https://img1.360buyimg.com/da/jfs/t4804/258/977737855/99644/57b86015/58eb4b7fN276ac4a4.jpg',
      'https://m.360buyimg.com/mobilecms/s720x322_jfs/t4927/43/978096918/95454/82b77c8/58eb59b8N686e9eda.jpg!q70.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    windowWidth: 320,
    sortPanelTop: '0',
    sortPanelDist: '290',
    sortPanelPos: 'relative',
    noticeIdx: 0,
   
    "goodsList": [
      {
        "goods": {
          "buyUnit": 10,
          "desc": "唯一的不同，是处处不同",
          "id": 1093,
          "imgUrl": "../../images/1.jpg",
          "name": "【预售】Apple iPhone6s Plus 128G 颜色随机",
          "tag": "ten"
        },
        "period": 211116272,
        "takeRate":0.01,
        "takeChances": 70,
        "totalChances": 8090
      },
      {
        "goods": {
          "buyUnit": 1,
          "desc": "颜色随机",
          "id": 348,
          "imgUrl":  "../../images/2.jpg",
          "name": "Apple Watch Sport 38毫米 铝金属表壳 运动表带",
          "tag": ""
        },
        "period": 211116207,
        "takeRate":0.19,
        "takeChances": 632,
        "totalChances": 3288
      },
      {
        "goods": {
          "buyUnit": 1,
          "desc": "配备 Retina 显示器",
          "id": 510,
          "imgUrl":  "../../images/3.jpg",
          "name": "Apple MacBook Pro 15.4英寸笔记本",
          "tag": ""
        },
        "period": 211116244,
        "takeRate":0.26,
        "takeChances": 3760,
        "totalChances": 14288
      },
      {
        "goods": {
          "buyUnit": 10,
          "desc": "超长续航 智能防盗",
          "id": 1168,
          "imgUrl":  "../../images/4.jpg",
          "name": "【预售】小牛电动N1电动踏板车 动力版 约11月20日发货",
          "tag": "ten"
        },
        "period": 211116256,
        "takeRate":0.05,
        "takeChances": 300,
        "totalChances": 5990
      },
      {
        "goods": {
          "buyUnit": 1,
          "desc": "因工艺原因重量略有浮动",
          "id": 979,
          "imgUrl":  "../../images/1.jpg",
          "name": "周生生 黄金 足金旋转木马吊坠",
          "tag": ""
        },
        "period": 211116138,
        "takeRate":0.17,
        "takeChances": 514,
        "totalChances": 2999
      },
      {
        "goods": {
          "buyUnit": 10,
          "desc": "颜色随机 支持专柜验货",
          "id": 673,
          "imgUrl":  "../../images/2.jpg",
          "name": "Coach 蔻驰 抛光粒面皮革铆钉COACH CENTRAL手提包",
          "tag": "ten"
        },
        "period": 211115685,
        "takeRate":0.13,
        "takeChances": 630,
        "totalChances": 4950
      },
      {
        "goods": {
          "buyUnit": 10,
          "desc": "颜色随机 美式奢侈生活风格的代表",
          "id": 943,
          "imgUrl":  "../../images/3.jpg",
          "name": "MICHAEL KORS 迈克高仕 十字纹皮革钱包",
          "tag": "ten"
        },
        "period": 211114592,
        "takeRate":0.45,
        "takeChances": 680,
        "totalChances": 1500
      },
      {
        "goods": {
          "buyUnit": 1,
          "desc": "吴晓波酿吴酒 一半清醒一半醉",
          "id": 1095,
          "imgUrl":  "../../images/4.jpg",
          "name": "【预售】吴酒 2016年贺年年酒 圣诞节开始派送",
          "tag": ""
        },
        "period": 211116226,
        "takeRate":0.04,
        "takeChances": 7,
        "totalChances": 199
      },
      {
        "goods": {
          "buyUnit": 10,
          "desc": "珍贵绝伦",
          "id": 140,
          "imgUrl":  "../../images/1.jpg",
          "name": "中国黄金 AU9999万足金50g薄片",
          "tag": "ten"
        },
        "period": 211116228,
        "takeRate":0.95,
        "takeChances": 14200,
        "totalChances": 14990
      }, {
      "goods": {
        "buyUnit": 10,
        "desc": "唯一的不同，是处处不同",
        "id": 1093,
        "imgUrl":  "../../images/2.jpg",
        "name": "【预售】Apple iPhone6s Plus 128G 颜色随机",
        "tag": "ten"
      },
      "period": 211116272,
      "takeRate":0.01,
      "takeChances": 70,
      "totalChances": 8090
    }
    ],
    animationNotice: {}
  },
  onReady: function() {

  },
  onLoad: function() {
    var me = this;
    var animation = wx.createAnimation( {
      duration: 400,
      timingFunction: 'ease-out',
    });
    me.animation = animation;
    wx.getSystemInfo( {
      success: function( res ) {
        me.setData( { windowWidth: res.windowWidth })
      }
    });

    console.log( 'onLoad' );
  },
  startNotice: function() {
    var me = this;
    var notices = me.data.notices || [];
    if( notices.length == 0 ) {
      return;
    }

    var animation = me.animation;
    //animation.translateY( -12 ).opacity( 0 ).step();
    animation.translateY( 0 ).opacity( 1 ).step( { duration: 0 });
    me.setData( { animationNotice: animation.export() });

    var noticeIdx = me.data.noticeIdx + 1;
    if( noticeIdx == notices.length ) {
      noticeIdx = 0;
    }

    // 更换数据
    setTimeout( function() {
      me.setData( {
        noticeIdx: noticeIdx
      });
    }, 400 );

    // 启动下一次动画
    setTimeout( function() {
      me.startNotice();
    }, 5000 );
  },
  onShow: function() {
    this.startNotice();

  },
  onToTop: function( e ) {
    if( e.detail.scrollTop >= 290 ) {
      this.setData( { sortPanelPos: 'fixed' });
    } else {
      this.setData( { sortPanelPos: 'relative' });
    }
    console.log( e.detail.scrollTop )
  }
})

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