微信小程序一元夺宝商城功能首页设计制作开发教程

本文给大家带来的是微信小程序一元夺宝商城功能首页设计制作开发教程，制作好以后效果图如下：

一、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}}">
        <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>
    <block wx:if="{{notices.length>0}}">
        <view class="notice-panel">
            <image class="notice-image" src="../../resources/images/ic_notice.png" />
            <view class="notice-message" animation="{{animationNotice}}" style="opacity:{{noticeIdx>=0}};">
                <span style="color:#999999">恭喜</span><span style="color:#3273c3">{{notices[noticeIdx].name}}</span><span style="color:#999999">{{notices[noticeIdx].time}}</span>{{notices[noticeIdx].goods}}
            </view>
        </view>
    </block>
    <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%;
}
.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: 45px;
    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: 50%;
    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( {
  data: {
    imgUrls: [
      'https://onegoods.nosdn.127.net/resupload/2016/9/18/4082e075e9ff72110bb1d73750be065b.jpg',
      'https://onegoods.nosdn.127.net/resupload/2016/9/20/01d732b0c46a38fc07bbc887dfe23af9.jpg',
      'https://onegoods.nosdn.127.net/resupload/2016/9/19/777e4b1711fb1b0283726cb0b197e8ba.jpg',
      'https://onegoods.nosdn.127.net/resupload/2016/9/20/f2f210633ca371ea6dc56a4b8916a15d.jpg',
      'https://onegoods.nosdn.127.net/resupload/2016/9/21/33c38d5283a862b2523fe2e085355cb2.jpg',
      'https://res.126.net/p/dbqb/resupload/onlinepath/2016/7/28/0/69e1275c4460f97f2d4b26d716348892.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    windowWidth: 320,
    sortPanelTop: '0',
    sortPanelDist: '290',
    sortPanelPos: 'relative',
    noticeIdx: 0,
    notices: [
      {
        "clickUrl": "dbjsbridge://go?module=detail&gid=1032&period=192",
        "goods": "海购商品 It’S SKIN 伊思 完美活肤逆时空晶钻蜗牛BB霜 50毫升",
        "name": "奥特曼",
        "time": "2分钟前"
      },
      {
        "clickUrl": "dbjsbridge://go?module=detail&gid=1122&period=646",
        "goods": "海购商品 1箱20盒 |五木 梅紫苏味乌冬面 109克",
        "name": "磊磊跳楼了",
        "time": "2分钟前"
      },
      {
        "clickUrl": "dbjsbridge://go?module=detail&gid=931&period=601",
        "goods": "宝马mini  儿童脚踏三轮车",
        "name": "最后一次",
        "time": "2分钟前"
      }
    ],
    "goodsList": [
      {
        "goods": {
          "buyUnit": 10,
          "desc": "唯一的不同，是处处不同",
          "id": 1093,
          "imgUrl": "http://res.126.net/p/dbqb/one/93/1093/a9cf9389428aa00af8508727427cb1c5.png",
          "name": "【预售】Apple iPhone6s Plus 128G 颜色随机",
          "tag": "ten"
        },
        "period": 211116272,
        "takeRate":0.01,
        "takeChances": 70,
        "totalChances": 8090
      },
      {
        "goods": {
          "buyUnit": 1,
          "desc": "颜色随机",
          "id": 348,
          "imgUrl": "http://res.126.net/p/dbqb/one/98/348/b73494078d526fcb5ead4201ec29daef.png",
          "name": "Apple Watch Sport 38毫米 铝金属表壳 运动表带",
          "tag": ""
        },
        "period": 211116207,
        "takeRate":0.19,
        "takeChances": 632,
        "totalChances": 3288
      },
      {
        "goods": {
          "buyUnit": 1,
          "desc": "配备 Retina 显示器",
          "id": 510,
          "imgUrl": "http://res.126.net/p/dbqb/one/112/112/b246c1f56b1b10de718d21a6aa7349ac.png",
          "name": "Apple MacBook Pro 15.4英寸笔记本",
          "tag": ""
        },
        "period": 211116244,
        "takeRate":0.26,
        "takeChances": 3760,
        "totalChances": 14288
      },
      {
        "goods": {
          "buyUnit": 10,
          "desc": "超长续航 智能防盗",
          "id": 1168,
          "imgUrl": "http://res.126.net/p/dbqb/one/168/1168/6abc05894e903b9749166c224d739838.png",
          "name": "【预售】小牛电动N1电动踏板车 动力版 约11月20日发货",
          "tag": "ten"
        },
        "period": 211116256,
        "takeRate":0.05,
        "takeChances": 300,
        "totalChances": 5990
      },
      {
        "goods": {
          "buyUnit": 1,
          "desc": "因工艺原因重量略有浮动",
          "id": 979,
          "imgUrl": "http://res.126.net/p/dbqb/one/229/979/defc72da941c4705fcdbb2a7ee03dbf1.png",
          "name": "周生生 黄金 足金旋转木马吊坠",
          "tag": ""
        },
        "period": 211116138,
        "takeRate":0.17,
        "takeChances": 514,
        "totalChances": 2999
      },
      {
        "goods": {
          "buyUnit": 10,
          "desc": "颜色随机 支持专柜验货",
          "id": 673,
          "imgUrl": "http://res.126.net/p/dbqb/one/173/673/47c126b7bb39524d3d62151b2ef76629.png",
          "name": "Coach 蔻驰 抛光粒面皮革铆钉COACH CENTRAL手提包",
          "tag": "ten"
        },
        "period": 211115685,
        "takeRate":0.13,
        "takeChances": 630,
        "totalChances": 4950
      },
      {
        "goods": {
          "buyUnit": 10,
          "desc": "颜色随机 美式奢侈生活风格的代表",
          "id": 943,
          "imgUrl": "http://res.126.net/p/dbqb/one/193/943/0994bfbd54c668fed6db160afd84eff4.png",
          "name": "MICHAEL KORS 迈克高仕 十字纹皮革钱包",
          "tag": "ten"
        },
        "period": 211114592,
        "takeRate":0.45,
        "takeChances": 680,
        "totalChances": 1500
      },
      {
        "goods": {
          "buyUnit": 1,
          "desc": "吴晓波酿吴酒 一半清醒一半醉",
          "id": 1095,
          "imgUrl": "http://res.126.net/p/dbqb/one/95/1095/0176dd96dcc8b4188e6b2bbf85102304.png",
          "name": "【预售】吴酒 2016年贺年年酒 圣诞节开始派送",
          "tag": ""
        },
        "period": 211116226,
        "takeRate":0.04,
        "takeChances": 7,
        "totalChances": 199
      },
      {
        "goods": {
          "buyUnit": 10,
          "desc": "珍贵绝伦",
          "id": 140,
          "imgUrl": "http://res.126.net/p/dbqb/one/140/140/ea7f0892ce49c332e2280513ee94a439.png",
          "name": "中国黄金 AU9999万足金50g薄片",
          "tag": "ten"
        },
        "period": 211116228,
        "takeRate":0.95,
        "takeChances": 14200,
        "totalChances": 14990
      }, {
      "goods": {
        "buyUnit": 10,
        "desc": "唯一的不同，是处处不同",
        "id": 1093,
        "imgUrl": "http://res.126.net/p/dbqb/one/93/1093/a9cf9389428aa00af8508727427cb1c5.png",
        "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 )
  }
})

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