嚴選好物，嚴選小程式

下雨不愁發表於2019-02-25

喜歡嘗試新的東西，據說小程式很火，我也去嘗試一下，搞了這麼久，也算是有一點小成就(有時候搞的一頭包)吧。 下面是我嘗試這個專案的經歷，如果你也遇到了相同的問題，歡迎探討。

限時搶購

搶購效果圖

那麼該怎麼做限時搶購呢？

  1. 只有部分商品才有折扣，一開始，吭哧吭哧的在原資料中，一個個找，我勒個去，直接單獨設一個陣列好了。時間我是以時分秒（h/m/s）的形式存在裡面

  2. 對時間（h/m/s）的預處理,封裝到utils中的getTime中

        let timeList = originalTime.split('/');
        this.totalTime =parseInt(timeList[0])*3600+(timeList[1])*60+parseInt(timeList[2]);
}
複製程式碼
  1. 使用計時器，判定總時間，一個商品的搶購時間完了就接著換一個。
        let interval = setInterval(() => {
      var changedTime = timeFun.exchangeTime();
      if (changedTime[3] <= 0){   //判斷總時間
        i = i + 1;        
        if ( i > len) {
          clearInterval(interval);
          return;
        }else {
          this.setTimeGood(i);
        }
      }
      this.setData({
        exchangeTime: changedTime
      })
    },1000)
複製程式碼

商品列表使用模板，將資料傳遞過去。注意資料的層級

嚴選好物，嚴選小程式

    <view class="hotreco-wrap">
      <view class="title">人氣推薦</view>
      <template is="itemList" data="{{goodsList}}"></template>
    </view>
複製程式碼

對於多層的，利用多層迴圈取出資料

        <block wx:for="{{goodsList}}" wx:for-item="group">
            <view class="item" wx:for="{{group.goods}}" wx:for-item="goods">
複製程式碼

下拉重新整理，避免無限制重新整理，因為資料都是模擬的，所以有限，會重複獲取，設定一個限制

下拉重新整理

     onReachBottom () {
    if (this.data.page > this.data.pageSize) {
      this.setData({
        noMore: true
      })
      return;
    }else {
      let nextPage = this.data.page+1;
      this.setData({
        page: nextPage
      });
      this.requestGoods();
    }
  },
複製程式碼

購物車

登入，捆綁微信賬號的授權

    <view class="login-wrap" wx:if="{{!hasUserInfo}}">
        <image src="http://yanxuan.nosdn.127.net/63d13a42d7b7d9aa68ad8dcb3d99926c.png?imageView&thumbnail=320x0" />
        <text>未登入</text>
        <button open-type="getUserInfo" bindgetuserinfo="onGotUserInfo">登入</button>
    </view>
    <view wx:else>
複製程式碼

分類的實現(利用scroll-view元件)

借鑑了一位大神的，等我找到了地址再更新一下。

最後

有興趣的去github上（https://github.com/joinnew/dalianwxapp_code）得到原始碼（還沒有全部上傳的），後期還會繼續改進的。
希望對大家有些幫助
複製程式碼

相關文章