uniapp——常用逻辑实现

1.上拉加载数据（数据分页）

视图结构：

<view class="list">
	<view v-for="(item,index) in list" :key="index"></view>
</view>

全局变量：

data() {
	return {
        //数据列表
        list:[],
        //分页请求参数对象
		querydata:{
			limit:10,
			page:1
		},
		loadend: false,
		loading: false,
        //加载文本
		loadTitle: '加载更多'
	}
},

加载方法：

//加载数据
getData(){
    if (this.loading) return;
	this.loading = true;
    this.loaded = true;
	this.loadTitle = '';
	getmyitem(this.querydata).then(res => {
		let newlist = res.data.newlist;
		let list = this.$util.SplitArray(newlist, this.list);
		let loadend = newlist.length < this.querydata.limit;
		this.loadend = loadend;
		this.loading = false;
		this.loadTitle = loadend ? '已全部加载' : '加载更多';
		this.$set(this, 'list', list);
		this.$set(this.querydata, 'page', this.querydata.page + 1);
		}).catch(err => {
			this.loading = false;
			this.loadTitle = '加载更多';
	});
},

注意SplitArray方法是自定义的方法，配置到vue的$util实例上

  /*
   * 合并数组
   */
SplitArray(list, sp) {
	if (typeof list != 'object') return [];
	if (sp === undefined) sp = [];
	for (var i = 0; i < list.length; i++) {
		sp.push(list[i]);
	}
	return sp;
},

2.上传图片

这里使用的是uniapp官方的上传组件 uni-file-picker

需要单独进行下载和引入到项目中

视图结构

<view class="example-body">
	<uni-file-picker fileExtname="png,jpg" @delete="del" @select="select" limit="9" file-mediatype="image" mode="grid" title="选择图片" v-model="images">
    </uni-file-picker>
</view>

全局变量

data() {
    return {
		//本地图片数组
		images: [],
        //线上图片数组
        onlineimages:[]
	};
},

更多参数和内置方法参见官方文档，这里使用到的参数和方法：

file-extname：选择文件后缀，字符串的情况下需要用逗号分隔（推荐使用字符串），根据 file-mediatype 属性而不同

@delete：文件从列表移除时触发

@select：选择文件后触发

limit：最大选择个数 ，h5 会自动忽略多选的部分

file-mediatype：选择文件类型,all 只支持 H5 和微信小程序平台    image/video/all

mode：选择文件后的文件列表样式     list/grid

title：组件标题，右侧显示上传计数

其中最重要的就是select和delete方法

// 获取上传状态
	select(e) {
		// console.log(e.tempFilePaths[0]);
		uni.uploadFile({
		url: HTTP_REQUEST_URL + '/api/' + 'upload/image', // 后端api接口
		filePath: e.tempFilePaths[0], // uni.chooseImage函数调用后获取的本地文件路径
		name: 'file', //后端通过'file'获取上传的文件对象
		formData: {
			'user': 'test'
		},
		fileType: 'image',
		header: {
			"Content-Type": "multipart/form-data",
			[TOKENNAME]: 'Bearer ' + store.state.app.token
		},
		success: (res) => {
		    // console.log(res.data);
			let data = JSON.parse(res.data)
			console.log(data.data.url);
            //此处就可以获取到上传图片的线上地址了
            this.onlineimages.push(data.data.url)
		}
	});
},

需要注意的是，这里我们用于展示的是本地的图片地址，当我们想要删除上传列表中的某一张图片时，我们需要将线上的对应图片地址也移除掉，这时候组件原有的delete方法不能够满足我们的需求，因此我们需要更改以下组件的内置方法。

 找到图片中组件位置

 按照图上进行delete方法进行修改，添加一个index也就是所选图片的索引作为提交值，然后我们就可以根据index对线上图片数组进行删除

//删除图片
del(e){
	console.log(e);
	this.onlineimages.splice(e.index,1)
},