【小程序项目开发-- 京东商城】uni-app之商品列表页面 （下）

    ,{
                    "path" : "goods_list/goods_list",
                    "style" :                                                                                    
                {
                 // 下拉刷新距离
                    "onReachBottomDistance": 150
                }

   onReachBottom( ) {
      // 显示加载效果
       uni.showLoading({
        title:"数据请求中..."
      })
      //  页面数自增加一
      this.queryObj.pagenum ++
      // 再次请求数据
      this.getGoodlist()
      // 隐藏加载效果
      uni.hideLoading()
    },

 methods: {
      async getGoodlist() {
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
        console.log(res)
        if (res.meta.status != 200) return uni.$showMsg("数据调取失败")
        // 展开拼接
        this.goodlist = [...this.goodlist,...res.message.goods]
        this.total = res.message.total
      }
    },

   data() {
      return {
        // 节流阀
         isLoading : false
·······

 onReachBottom() {
          // 显示加载效果
      uni.showLoading()
      // 如果正在加载 跳出函数
      if  (this.isLoading) return
      
      //  页面数自增加一
      this.queryObj.pagenum++
      // 再次请求数据
      this.getGoodlist()
      // 隐藏加载效果
      uni.hideLoading()
    },
 methods: {
      async getGoodlist() {
        // 此时开始加载 设置为 true
        this.isLoading = true
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
        console.log(res)
        if (res.meta.status != 200) return uni.$showMsg("数据调取失败")
        // 展开拼接
        this.goodlist = [...this.goodlist, ...res.message.goods]
        this.total = res.message.total
        // 请求成功 设置为false （ 没有走完函数是不允许再次请求）
        this.isLoading = false
      }

 onReachBottom() {
      // 判断是否加载完毕
      // 方法一 ( 总长度相加 )
      if (this.goodlist.length + this.queryObj.pagesize >= this.total) return uni.$showMsg('没有更多的数据啦...')
      // 方法二 （ 页面数 * 页面数据条数）
      // if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('没有更多的数据啦...')

  onPullDownRefresh() {
      // 重置所有数据
      this.queryObj.pagenum = 1
      this.goodlist = []
      this.total = 0
      this.isLoading = false
      // 重写获取数据，并传箭头函数进行取消下拉刷新
      this.getGoodlist(() => uni.stopPullDownRefresh())
    },

async getGoodlist(callback) {
        // 此时开始加载 设置为 true
        this.isLoading = true
        const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
        console.log(res)
        // 取消下拉刷新 (如果有则往后走达到存在则允许函数的效果)
        callback && callback()
        // 请求成功 设置为false （没有走完函数是不允许再次请求）
        this.isLoading = false
        // 隐藏加载效果
        uni.hideLoading()
        if (res.meta.status != 200) return uni.$showMsg("数据调取失败")
        // 展开拼接
        this.goodlist = [...this.goodlist, ...res.message.goods]
        this.total = res.message.total
      }

< <!-- 列表页 -->
    <view class="goods-list">
      <view v-for="(item,i) in goodlist" v-bind:key="i" @click="goToUrl(item)">
        <my-goods :good="item"></my-goods>
      </view>
    </view>

  methods: {
      goToUrl(item){
        uni.navigateTo({
          url:"/subpackages/goods_detail/goods_detail?goods_id=" + item.goods_id,
        })
      },

git add .

git commit -m "商品分类页面开发完成"

git push origin -u goodlist

git checkout master 

git merge goodlist

git push 

git branch -d goodlist