具体内容如下

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

猜你喜欢

• JS基础语法有哪些，具体怎么用

  本篇文章介绍了几个javascript的基本语法和maven的配置教程。想学习javascript和maven的朋友们可以参考一下，希望能给你带来帮助

• 常用的ES6有哪些，用法是怎样的？

  本篇文章带大家聊聊ES6，带你30分钟熟练使用最常用的ES6，还不学是等着被卷死？

• 怎样用Ajax实现进度条，方法是什么

  使用：Easy Mock创建api接口注意：若弹出该invalid or unexpected token错误提示信息，说明编写的数据格式有问题，修改为正确格式即可创建成。随后可以在postman中进行验证：ajax通过GET方法获取数据：根据获取出来得阶段数据来更改相对应得进度：!DOCTYPE htmlhtml l

• vue项目中怎样实现支持多语言，方法是什么

  VUE+Element 前端应用实现国际化的处理还是非常方便的，一般在Main.js函数里面引入语言文件，然后在界面上进行一定的处理，把对应的键值转换为对应语言的语义即可。本篇随笔介绍在VUE+Element 前端应用中如何实现在界面快速的支持多语言国际化的处理逻辑代码。

• jQuery中用什么方法判断浏览器宽度，怎样做

  jquery求浏览器宽度的方法：1、利用“$()”方法获取浏览器窗口对象；2、利用width()方法来求指定浏览器对象的宽度，该方法用于返回或者设置匹配元素的宽度，语法为“$(window).width()”。