具体内容如下

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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• e框架中如何用递归方式做侧边栏导航？

  这篇文章主要介绍了vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• Vue实时获取天气的功能怎样实现？

  今天给大家分享的是用Vue怎样实现实时获取天气的功能，而在在 vue 中，我们可以利用webSocket来做一个简单的天气实时更新，下文是实现效果及示例，感兴趣的朋友就继续往下看吧。

• React和Redux的关系是怎样，redux的核心概念是什么

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

• 跨域解决的常用方法有什么，具体操作是什么

  跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据,下面这篇文章主要给大家介绍了关于VUE跨域详解以及常用解决跨域的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

• 用JS实现重置功能的方法是什么？

  这篇文章给大家分享的是用JS实现重置功能的方法。对于重置的功能大家应该都不陌生，当网页填写的信息需要大量修改时，重置功能快速的重置页面，非常的方便。文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。