微信小程序04---头像上传、瀑布流、下拉刷新、触底加载更多、分包

疾风小蜗牛

已于 2022-10-23 21:34:57 修改

阅读量580

点赞数

分类专栏：前端微信小程序文章标签：微信小程序小程序

于 2022-10-23 21:08:29 首次发布

本文链接：https://blog.csdn.net/Wr2138/article/details/127480570

版权

一、头像上传

1、选择图片 wx.chooseImage()

2、上传文件 wx.uploadFile()

一、头像上传

1、选择图片 wx.chooseImage()

其中count未上传的个数

2、上传文件 wx.uploadFile()

在上传文件时要注意：

①文件上传地址的域名要在微信开发平台进行设置

②头部要携带cookie

③filePath 属性是从wx.chooseImage()中获取的，所以这两个API常常在一起使用

④name属性是更改头像接口上传文件的字段名

⑤头部默认为 multipart/form-data 格式

⑥上传地址 url 属性值为接口地址

更改头像：
	
	// 上传图片
	    wx.chooseImage({
	      count: 1,
	      success: (res) => {
	        console.log(res);
	        // 更改头像
	        wx.uploadFile({
	          header: {
	            'cookie': wx.getStorageSync('cookie')
	          },
	          filePath: res.tempFilePaths[0],
	          name: 'avatarfile',
	          url: 'https://showme2.myhope365.com/api/system/user/profile/update/avatar/nos',
	          success: (res1) => {
	            console.log(res1);
	            wx.showToast({
	              title: '更改成功',
	            })
	          },
	          complete: () => {
	            getUserInfo().then(res3 => {
	              this.setData({
	                userInfo: res3.data.data,
	                isLoading: false
	              })
	            })
	          }
	        })
	      },
	      fail: () => {
	        wx.showToast({
	          icon: "error",
	          title: '取消更改',
	        })
	        this.setData({
	          isLoading: false
	        })
	      }
    })

二、瀑布流+下拉刷新+触底加载

目标实现效果如下：

下面是talk.js文件

// pages/talk/talk.js
// import { post } from '../../api/api'
import { getTalkList } from '../../api/user'
let app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // talkList: [],
    leftList: [],
    rightList: [],
    leftHeight: 0,
    rightHeight: 0,
    // 判断当前页是否加载完成
    finishFlag: false,
    // 请求页码
    pageNum: 1,
    // 每页个数
    pageSize: 10,
    // 判断是否已经加载完了
    isEnd: false,
    // 触底加载的loading效果
    isPageEnd: false,
    isLoading: true
  },

  // 处理数据---瀑布流
  initImg(list) {
    this.data.finishFlag = false
    if (list.length == 0) {
      // 当前页加载完成
      this.data.finishFlag = true
      return
    }
    let first = list.shift()
    wx.getImageInfo({
      src: first.coverImgUrl,
      success: (res) => {
        if (this.data.leftHeight <= this.