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