具体内容如下

list.wxml

<view class="home-main">
    <!-- 搜索 -->
    <view class="search-bar">
        <view class="search-bar-form">
            <image class="search-img" src="/images/search-icon.png"></image>
            <input class="search-input" type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
        </view>
    </view>
    <!-- 列表 -->
    <view class="classify-list-all">
        <view wx:for="{{list}}" wx:key="id" data-item='{{item}}' class="classify-list flex align-center" bindtap="goClassify">
            <image class="classify-list-image" src="{{item.logo}}"></image>
            <view class="classify-list-main">
                {{item.name}}
            </view>
        </view>
    </view>
</view>

list.js

import Api from "../../../config/api";
import Http from "../../../utils/http";
Page({
  data: {
    formData: {
      size: 10,//分页，一页10条
      current: 1,//当前页数
    },
    isLast: false,//是否是最后一页
    list: [],//列表数组
  },
  onLoad() {
    //首次请求
    this.queryListPage();
  },
  onPullDownRefresh() {
    //下拉刷新
    this.setData({ 'formData.current': 1 });
    this.queryListPage();
  },
  onReachBottom() {
      //页面上拉触底事件的处理函数
    this.queryListPage();
  },
  goClassify(e) {
    wx.navigateTo({
      url: `/pages/home/classify/classify?id=${e.currentTarget.dataset.item.id}`,
    })
  },
  queryListPage() {
      //请求列表
    if (this.data.isLast) {
      return;
    };
    Http.request(Api.productQueryMyPage, this.data.formData, 'GET', true).then(res => {
      let arr = res.data || [];
      if (arr && arr.length > 0) {
        arr = arr.map(item => {
         //需要处理列表
         item.name = item.name + '处理后数据';
          return item;
        });
      } else {
        this.setData({
          isLast: true,
        });
      }
      let list = this.data.formData.current === 1 ? arr : this.data.list.concat(arr);
      let current = this.data.formData.current + 1;
      this.setData({
        list,
        'formData.current': current
      });
    });
  },
})

api.js

export default {
  /******* 商品信息 *******/
  productQueryMyPage: '/product/queryMyPage',//查询我的商品列表
}

http.js这个简单的封装的一下先凑合用，还不太完善

// import Api from "../config/api";
import Config from "../config/config";
function checkCode(res) {
  //401token过期 403表示这个接口是需要登录的。你没有权限访问
  if ([401, 403].includes(res.statusCode)) {
    wx.removeStorage({
      key: 'token',
      success() { 
        wx.switchTab({
          url: '/pages/my/my-main/my-main'
        });
      }
    })
  }
}
const http = {
  request(url, data, method, needLogin) {
    let header = {
      'content-type': 'application/json' // 默认值
    };
    if (needLogin) {
      const token = wx.getStorageSync('token');
      if (token) {
        header['Authorization'] = 'Bearer ' + token;
      }
    };
    return new Promise((resolve, reject) => {
      wx.request({
        url: Config.domain + url,
        data,
        method,
        header,
        success(res) {
          console.log(res);
          console.log(res.data);
          checkCode(res);
          resolve(res.data);
        },
        fail(res) {
          reject(res);
        }
      })
    })
  },
  uploadFile(url, filePath, formData, needLogin) {
    let header: any = {
      'content-type': 'multipart/form-data' // 默认值
    };
    if (needLogin) {
      const token = wx.getStorageSync('token');
      if (token) {
        header['Authorization'] = 'Bearer ' + token;
      }
    };
    return new Promise((resolve: any, reject: any) => {
      wx.uploadFile({
        url: Config.domain + url,
        filePath,
        name: 'files',
        formData,
        header,
        success(res) {
          debugger
          console.log(res);
          console.log(res.data);
          checkCode(res.statusCode);
          resolve(JSON.parse(res.data));
        },
        fail(res) {
          reject(res);
        }
      })
    })
  },

};
export default http;

config.js

export default {
  domain: 'http://www.test.com',
}

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• vue编译器util工具如何使用的，用哪些简单实例

  这篇文章主要为大家介绍了vue编译器util工具使用方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• JS中感叹号表示什么意思，作用和用法是什么

  js中!的用法是比较灵活的，它除了做逻辑运算常常会用！做类型判断，可以用！与上对象来求得一个布尔值，

• React实现浏览器自动刷新的方法是什么

  这篇文章主要介绍了react实现浏览器自动刷新的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• mixin在vue中的使用是怎样，要注意什么

  这篇文章主要为大家介绍了vue之mixin的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

• JavaScript优化技巧你了解多少？JS开发看过来

  这篇文章给大家分享的是一些JavaScript优化技巧。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，对大家学习或工作都有一定的帮助，接下来跟随小编一起了解看看吧。