开发|走进小程序（二）

/** * 页面的初始数据 */ data: { imgUrls : [ "/static/images/banner.jpeg", "/static/images/banner.jpeg" ], swiperWidth: 0, // 屏幕宽度 swiperHeight : 0, // 根据屏幕宽度等比例计算图片高度 buyList : [], // 限时抢购的数据 buyTime : "010226", // 限时抢购倒计时 list: [], // 首页商品列表数据 start : 0// 上拉加载的时候请求数据的起始点 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 请求服务器，得到首页的数据 let _this = this; wx.request({ url: 'http://www.xiongmaoyouxuan.com/api/tab/1', method : "get", success : function(res){ console.log(res); _this.setData({ imgUrls: res.data.data.banners, buyList: res.data.data.topList, list: res.data.data.items.list.filter(function(item, index){ // 返回值为true，那么当前item就会保留，否则就过滤掉 return item.title != undefined; }) }) } }) // 根据屏幕宽度计算图片大小 let screenWidth = wx.getSystemInfoSync().screenWidth; this.setData({ swiperWidth: screenWidth, swiperHeight: screenWidth / 1080 * 400 }) // 调用倒计时方法 this.calcBuyTime(); // 每隔一秒调用一次函数 setInterval(this.calcBuyTime, 1000); }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { var _this = this; // 每一次上拉加载都是在之前的基础上+20 var st = this.data.start + 20; this.setData({ start : st }); wx.request({ url: 'http://www.xiongmaoyouxuan.com/api/tab/1/feeds?start='+this.data.start, method : "GET", success : function (res) { // 过滤调没有title的数据 var list = res.data.data.list.filter(function (item) { // 有title属性就保留，没有就被过滤掉 return item.title; }); // 当前请求下来的list添加到data的list里面去 var arr = _this.data.list.concat(list); // ... 指的是把数组展开成一系列逗号隔开的值 // var arr = [2,3,4,5]; // ...arr -- 2,3,4,5 // var arr = [..._this.data.list, ...list]; _this.setData({ list :arr }); } }) }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, calcBuyTime : function () { // 把时间调到下一个整点 var date = newDate(); var startTime = date.getTime(); date.setHours(date.getHours() + 1, 0, 0); var endTime = date.getTime(); var direction = parseInt((endTime - startTime)/1000); var seconds = direction % 60; var minutes = (direction - seconds) / 60; // 默认事下一个整点，所以小时数就是0 // 可以继续扩展，把小时数计算一下 var str = "00" + (minutes > 9 ? minutes : "0"+minutes) + (seconds>9 ? seconds : "0"+seconds); this.setData({ buyTime: str }); }, // 跳转详情页 onDetail : function (evt) { console.log(evt); var id = evt.currentTarget.dataset.id; wx.navigateTo({ url: '/pages/detail/detail?id='+id }) }})

{ "usingComponents": { "van-button": "/dist/button/index", "van-card": "/dist/card/index", "van-loading": "/dist/loading/index" }}//引入vant库的各种组件

<viewclass='page'> <viewclass='search'> <view>搜索</view> <view> <navigatorurl='/pages/search/search'>搜索商品</navigator> </view> </view> <swiper indicator-dots="true" autoplay="true" interval="3000" duration="500" circular="true" style="width:{{swiperWidth}}px; height:{{swiperHeight}}px" > <blockwx:for="{{imgUrls}}"> <swiper-item> <imagesrc="{{item.imageUrl}}"class="slide-image"/> </swiper-item> </block> </swiper> <view> <viewclass='buy-head'> <textclass='buy-title'>整点限时抢购</text> <viewclass='buy-time'> <text>{{buyTime[0]}}</text> <text>{{buyTime[1]}}</text> <textclass='icon'>：</text> <text>{{buyTime[2]}}</text> <text>{{buyTime[3]}}</text> <textclass='icon'>：</text> <text>{{buyTime[4]}}</text> <text>{{buyTime[5]}}</text> </view> </view> <scroll-view scroll-x style="width: {{swiperWidth}}px;" > <viewclass='buy-body'> <blockwx:for="{{buyList}}"> <viewclass='buy-item'> <viewclass='buy-image'><imagesrc='{{item.image}}'mode='aspectFit'></image></view> <view><textclass="van-ellipsis">{{item.title}}</text></view> <view><textclass="buy-price">￥{{item.price}}</text></view> </view> </block> </view> </scroll-view> </view> <viewclass='list'> <blockwx:for="{{list}}"> <van-card bindtap="onDetail" data-id="{{item.id}}" tag="{{item.couponValue}}" price="{{item.price}}" origin-price="{{item.originPrice}}" title="{{item.title}}" thumb="{{ item.image }}" > <viewslot="footer"> <van-buttonsize="mini">查看详情</van-button> <van-buttonsize="mini"type='danger'>加购物车</van-button> </view> </van-card> </block> </view> <viewclass='loading'> <van-loadingtype="spinner"color="#fff"/> </view> </view>

data: { tabList : [], // 分类的所有数据 tabIndex : 0// 当前正在查看的分类在tabList里的索引 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 请求数据接口，得到tab列表 var _this = this; wx.request({ url: 'http://www.xiongmaoyouxuan.com/api/tabs', method: "GET", success : function(res){ console.log(res); _this.setData({ tabList : res.data.data.list.map(function(item){ // 给每一个分类加上start默认值为0 item.start = 0; return item; }) }); // 请求默认第一个分类的数据 wx.request({ url: 'http://www.xiongmaoyouxuan.com/api/tab/'+_this.data.tabList[0].id, method: "GET", success : function (res) { var list = res.data.data.items.list; console.log(list); // tabList里有多个title，每个title都有自己对应的详细商品数据 // 所以新增detail字段放到对应title的对象里 // 由于小程序里直接修改data的值不会立即生效 // 所以先取出来，修改完成以后再set回去 var tabList = _this.data.tabList; tabList[0].detail = list.filter(function(item){ // title存在，return true title不存在，return false return item.title; }); _this.setData({ tabList : tabList }); } }) } })onReachBottom: function () { var _this = this; // 得到当前分类的索引 var idx = this.data.tabIndex; // 使用索引取到当前分类的id var id = this.data.tabList[idx].id; // 把tabList取出来，设置当前分类的start，tabList set回去 var list = this.data.tabList; list[idx].start += 20; var start = list[idx].start; this.setData({ tabList : list }); // 请求当前分类的下20条数据 wx.request({ url: 'http://www.xiongmaoyouxuan.com/api/tab/'+ id +'?start=' + start, method : "GET", success : function (res) { // 得到后20条数据 // 到tabList的当前分类的detail里追加这20条 var list = _this.data.tabList; list[idx].detail = list[idx].detail.concat(res.data.data.items.list); console.log(res.data.data.items.list); _this.setData({ tabList : list }); } }) }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, onTabChange : function (evt) { var _this = this; // 得到当前分类的索引值，通过索引值取id // 通过当前id对应的接口去请求数据 console.log(evt.detail); var idx = evt.detail.index; // 修改当前tabIndex this.setData({ tabIndex : idx }); var id = this.data.tabList[idx].id; wx.request({ url: 'http://www.xiongmaoyouxuan.com/api/tab/'+id, method: "GET", success : function (res) { console.log(res.data.data.items.list); // 把tabLIst取出来赋值给list，然后修改list[idx].detail // 修改结束以后再把整个tabList setData回去 var list = _this.data.tabList; list[idx].detail = res.data.data.items.list; _this.setData({ tabList : list }); } }) }, onDetail: function (evt) { console.log(evt); var id = evt.currentTarget.dataset.id; wx.navigateTo({ url: '/pages/detail/detail?id=' + id }) }})

{ //引入组件 "usingComponents": { "van-tab": "/dist/tab/index", "van-tabs": "/dist/tabs/index", "van-card": "/dist/card/index", "van-button": "/dist/button/index", "van-loading": "/dist/loading/index" }}

<viewclass='page'> <van-tabsswipeableanimatedstickybind:change="onTabChange"> <blockwx:for="{{ tabList }}"> <van-tabtitle="{{item.name}}"> <blockwx:for="{{item.detail}}"wx:for-item="detail"> <van-card bindtap="onDetail" data-id="{{detail.id}}" tag="{{detail.couponValue}}" price="{{detail.price}}" origin-price="{{detail.originPrice}}" title="{{detail.title}}" thumb="{{ detail.image }}" > <viewslot="footer"> <van-buttonsize="mini">查看详情</van-button> <van-buttonsize="mini"type='danger'>加购物车</van-button> </view> </van-card> </block> </van-tab> </block> </van-tabs><viewclass='loading'> <van-loadingtype="spinner"color="#fff"/> </view></view>