严选好物,严选小程序

时间:2019-11-04
本文章向大家介绍严选好物,严选小程序,主要包括严选好物,严选小程序使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

本文转载于:猿2048网站➤https://www.mk2048.com/blog/blog.php?id=icjcb1k0jb

喜欢尝试新的东西,据说小程序很火,我也去尝试一下,搞了这么久,也算是有一点小成就(有时候搞的一头包)吧。 下面是我尝试这个项目的经历,如果你也遇到了相同的问题,欢迎探讨。

限时抢购

那么该怎么做限时抢购呢?
  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)得到源码(还没有全部上传的),后期还会继续改进的。
希望对大家有些帮助

原文地址:https://www.cnblogs.com/qianduanwriter/p/11791523.html