uniapp分页和左滑删除

<template>
	<view class="content paddingbox bgwhrite">
		<!--宣传活动-->
		<view class="contentbox2  bgfff borderradius24">
			<view class="arctilelist">

				<view v-for="(item,index) in list" :key="index" :class="index==list.length-1 ? '' :'borderbottom'"
					@click="gotosearch(item.id)">
					<view class=" paddingbox display borderradius8 paddingtop40">
						<view v-if="item.fileId" class="contentbox2item1 swiperarea bgddd borderradius8">
							<swiper class="swiper" autoplay interval="2000" duration="500">
									<swiper-item >
									<image mode="aspectFit" :src="ip+'/file/api/file/download?fileId=' + item.fileId +
									'&chToken=' + token" />
								</swiper-item>
							</swiper>
						</view>
						<view class="mleft20 contentbox2item2" :style="[{width:(img?'calc(100% - 210upx)':'100%')}]">
							<view class="fontsize28 fontbold  color333">
								{{item.activityTitle?item.activityTitle:'暂无'}}
							</view>
							<view class="display justifybetween alignitem mtop30">
								<view class="fontsize28 color666">{{item.activityDate?item.activityDate:'暂无'}}</view>
								<view
									class="bgyellow alignitem nomalbtn colorfff borderradius24 fontsize24 yellowshadow width100 display justifycenter"
									v-if="item.activityStatusName=='未开始'">
									<view>未开始</view>
								</view>
								<view v-if="item.activityStatusName=='已开始'"
									class="bggreen alignitem nomalbtn colorfff borderradius24 fontsize24 greenwshadow width100 display justifycenter">
									<view>已开始</view>
								</view>
								<view v-if="item.activityStatusName=='已结束'"
									class="bggray alignitem nomalbtn colorfff  borderradius24 fontsize24 grayshadow width100 display justifycenter">
									<view>已结束</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<text class="loading-text">
					{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}
				</text>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	const baseUrl = require("@/api/http.js");
	export default {
		data() {
			return {
				// 分页
				pageSize: 10,
				pageNum: 1,
				loadingType: 0,
				img: false,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				list: [],
				token: uni.getStorageSync('token'),
				ip: baseUrl.ip
			}
		},
		onLoad() {
			this.pageNum = 1
			this.list = []
			this.getListInfo();
		},
		/*下拉刷新*/
		onPullDownRefresh: function() {
			this.getListInfo();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		/*上拉刷新*/
		onReachBottom: function() {
			this.getMoreListInfo()
		},
		methods: {
			gotosearch(id) {
				let num = id.toString()
				uni.navigateTo({
					url: '/pages/publicize/articlesearch?id=' + num
				})
			},
			/*下拉刷新*/
			getListInfo() {
				const that = this;
				this.pageNum = 1
				this.list = []
				this.getlist()
			},
			/* 上拉加载 */
			getMoreListInfo() {
				this.pageNum++
				if (this.loadingType != 0) {
					return false; //loadingType!=0;直接返回
				}
				this.loadingType = 1;
				uni.showNavigationBarLoading();
				this.getlist()
			},
			// 获取列表
			getlist() {
				this.http.get('/classification/api/weChat/publicityActivityListByPage', {
					current: this.pageNum,
					size: this.pageSize,
				}).then(res => {
					if (res.status == 'X0000') {
						this.list = this.list.concat(res.data.records)
						if (this.list.length < res.data.total) { //当之前的数据长度等于count时跳出函数，不继续执行下面语句
							this.loadingType = 0
							uni.hideNavigationBarLoading();
							uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
						} else {
							this.loadingType = 2;
							uni.hideNavigationBarLoading(); //关闭加载动画
							return false;
						}
					} else {
						this.$api.msg(res.message)
					}
				})
			}



		}
	}
</script>

<style>
	.content {
		height: 100vh;
	}

	.swiperbox {
		height: 264upx;
		border-radius: 8px;
		margin-top: 35upx;
		margin-bottom: 64upx;
	}

	.swiper {
		width: 100%;
		/* height: calc(100vw * 132 / 342); */
	}

	.swiper image {
		height: 100%;
	}

	.arctilelist .swiper {
		height: 108upx;
		width: 190upx;
	}

	.arctilelist .swiperarea {
		width: 190upx;
	}

	image {
		width: 100%;
	}

	.contentbox {
		width: 100%;
	}

	.contentbox1 {
		width: 100%;
	}

	.contentbox1item {
		width: 31%;
		padding: 46upx 0upx;
	}

	.images image {
		height: 50upx;
		width: 50upx;
	}

	.contentbox2item1 {
		height: 108upx;
		width: 30%;
	}

	.contentbox2item2 {
		width: 65%;
	}

	.contentbox3item {
		padding: 12upx 40upx;
	}

	.contentbox3item1 {
		width: 80%;
	}

	.contentbox3item2 {
		width: 20%;
	}

	.mtop24 {
		margin-top: 24upx;
	}

	.mbootom20 {
		margin-bottom: 20upx;
	}
</style>

1.html

	<text class="loading-text">
					{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}
				</text>

2.data

return {
				// 分页
				pageSize: 10,
				pageNum: 1,
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				list: [],
			}

3.methods----要删除一条后，更新的函数应该是下拉刷新getListInfo()

methods: {

			/*下拉刷新*/
			getListInfo() {
				const that = this;
				this.pageNum = 1
				this.list = []
				this.getlist()
			},
			/* 上拉加载 */
			getMoreListInfo() {
				this.pageNum++
				if (this.loadingType != 0) {
					return false; //loadingType!=0;直接返回
				}
				this.loadingType = 1;
				uni.showNavigationBarLoading();
				this.getlist()
			},
			// 获取列表
			getlist() {
				this.http.get('/classification/api/weChat/publicityActivityListByPage', {
					current: this.pageNum,
					size: this.pageSize,
				}).then(res => {
					if (res.status == 'X0000') {
						this.list = this.list.concat(res.data.records)
						if (this.list.length < res.data.total) { //当之前的数据长度等于count时跳出函数，不继续执行下面语句
							this.loadingType = 0
							uni.hideNavigationBarLoading();
							uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
						} else {
							this.loadingType = 2;
							uni.hideNavigationBarLoading(); //关闭加载动画
							return false;
						}
					} else {
						this.$api.msg(res.message)
					}
				})
			}

4.随时刷新界面onshow下实现分页，实现删除一个但是实时刷新

<template>
	<view class="contentdd bgwhrite">
		<view class="content bgwhrite">
			<view class="t-wrap bgfff padding43 mtop20">
				<view class="t-wrap">
					<t-slide ref="slide" @edit="edit" @del="del" @itemClick="itemClick">
						<template v-slot:default="{item}">
							<view class="t-conten">
								<view class=" bgfff borderradius16 left90">
									<view class="contentbox  mbootom20">
										<view class="">
											<view class="display mtop40" @click="mineaddressdeteil('view',item)">
												<view class="bgred display justifycenter width100 borderradius16"
													v-if="item.defaultStatus==1">
													<view class="colorfff fontsize20 ">
														<text>默认</text>
													</view>
												</view>
												<view class="color999 fontsize24">
													<text class="titletext fontsize28">
														{{item.deptName?item.deptName:'暂无'}}{{item.subjectName?item.subjectName:'暂无'}}
													</text>
												</view>
											</view>
											<view class="display justifybetween mtop20 width90">
												<view @click="mineaddressdeteil('view',item)" class="width800">
													<!-- <view class="color333 fontsize28">11</view> -->
													<view class="color333 fontsize28">
														{{item.address?item.address:'暂无'}}
													</view>
													<view class="display color999 fontsize24 mtop20">
														<view>{{item.contactPerson?item.contactPerson:'暂无'}}</view>
														<view class="mleft48">{{item.mobile?item.mobile:'暂无'}}</view>
													</view>
												</view>
												<view class="width200 display alignitem justifycenter"
													@click="mineaddress('edit',item)">
													<view class="iconbox2">
														<view class="iconfont icon-bianji1 colorgreen">
														</view>
													</view>
												</view>

											</view>
										</view>
									</view>

								</view>
							</view>
						</template>
					</t-slide>
				</view>

				<text class="loading-text">
					{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}

				</text>
			</view>
			<view class="submitbtn">
				<button class="btn bggreen colorfff fontbold fontsize32" @click="addaddress">
					+ 新增地址</button>
			</view>
		</view>
	</view>
</template>

<script>
	import tSlide from "@/components/t-slide/t-slide.nvue"
	export default {
		components: {
			tSlide
		},
		data() {
			return {
				delid: '',
				editid: '',
				// 分页
				pageSize: 10,
				pageNum: 1,
				loadingType: 0,
				img: false,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				list: [],
				type: ''
			}
		},
		onLoad(optiongs) {
			this.type = optiongs.type
			console.log(this.type)
		},
		onShow() {
			this.pageNum = 1
			this.list = []
			this.getListInfo();
			uni.setNavigationBarTitle({
				title: '地址管理'
			})
			// let that = this
			this.$nextTick(() => {
				this.$refs.slide.assignment(this.list) //this.dataList 你的数据数组
			})
		},
		/*下拉刷新*/
		onPullDownRefresh: function() {
			this.getListInfo();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		/*上拉刷新*/
		onReachBottom: function() {
			this.getMoreListInfo()
		},
		methods: {
			/*下拉刷新*/
			getListInfo() {
				this.pageNum = 1
				this.list = []
				this.getlist()
			},
			/* 上拉加载 */
			getMoreListInfo() {
				this.pageNum++
				if (this.loadingType != 0) {
					return false; //loadingType!=0;直接返回
				}
				this.loadingType = 1;
				uni.showNavigationBarLoading();
				this.getlist()
			},
			getlist() {
				this.http.get('/classification/api/weChat/residentAddrListByPage', {
					current: this.pageNum,
					size: this.pageSize,
				}).then(res => {
					if (res.status == 'X0000') {
						this.list = this.list.concat(res.data.records)
						this.$nextTick(() => {
							this.$refs.slide.assignment(this.list) //this.dataList 你的数据数组
						})
						if (this.list.length < res.data.total) { //当之前的数据长度等于count时跳出函数，不继续执行下面语句
							this.loadingType = 0
							uni.hideNavigationBarLoading();
							uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
						} else {
							this.loadingType = 2;
							uni.hideNavigationBarLoading(); //关闭加载动画
							return false;
						}
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			mineaddress(style, id) {
				uni.navigateTo({
					url: '/pages/recycling/address?style=' + style + '&form=' + JSON.stringify(id)
				})
			},
			addaddress() {
				uni.navigateTo({
					url: '/pages/recycling/address?style=add'
				})
			},
			mineaddressdeteil(style, id) {
				if (this.type == 'view') {} else {
					uni.$emit('query', JSON.stringify(id));
					uni.navigateBack();
				}

			},
			//点击单行
			itemClick(data) {},

			//删除
			del(data) {
				this.delid = data.id
				//根据id删除地址
				if (uni.getStorageSync('token')) {
					this.http.del('/classification/api/weChat/deleteResidentAddr/' + this.delid).then(res => {
						setTimeout(() => {
							this.getListInfo();
						}, 500);
					})
				}
			},
			//编辑
			edit(data) {
				uni.showToast({
					title: '编辑ID--' + data.id,
					icon: 'none'
				})
			},
		}
	}
</script>


<style scoped>
	.width200 {
		width: 20%;
	}

	.width800 {
		width: 80%;
	}

	.borderradius4 {
		border-radius: 4upx;
	}

	.left90 {
		width: 100%;
	}

	.width90 {
		width: 100%;
	}

	/* 	.mbootom20{
		margin-bottom: 40upx;
	} */
	.contentdd {
		/* padding-bottom: 900upx; */
		padding-bottom: 100vh;
	}

	.width40 {
		width: 40upx;
	}

	.padding43 {
		padding: 0upx 32upx 30upx 40upx;
	}

	.content {
		width: 90vw;
		position: relative;
		padding: 20upx 32upx 200upx 32upx;
	}

	.contentbox {
		padding-bottom: 20upx;
	}

	.bgred {
		background-color: #E53B22;
		border-radius: 4upx;
		padding: 4upx;
		width: 70upx;
		margin-right: 12upx;
	}

	.editicon {
		width: 24upx;
		height: 24upx;
	}

	.mleft48 {
		margin-left: 48upx;
	}

	.mbottom40 {
		margin-bottom: 40upx;

	}

	.submitbtn {
		box-shadow: 1px 2px 8px #E5E5E5;
	}

	.iconbox2 {
		width: 20upx;
	}

	.iconbox2 image {
		width: 100%;
	}


	.t-wrap {
		/*    padding: 0 30upx; */

	}

	.t-conten {
		display: flex;
		flex-direction: row !important;
		width: 100%;

		/*   padding: 10upx 0; */


	}
</style>

左滑删除组件

t-slide.vue 

<template>
	<view>
	 <view class="t-slide-box" v-for="(item,index) in items" :key="index" > 
	 	<view class="t-slide-area">
	 	　<view class="t-slide-view">
	 	　　<view class="t-touch-item" :style="{height:height}" :class=" item.isTouchMove?'touch-move-active':''" @touchstart="touchstart($event,item)" @touchmove="touchmove" :data-index="index">
	 		      <view class="t-slide-content" :style="{transform:item.isTouchMove?'translateX(0)':`translateX(${btnWidth*(btnArr.length)}rpx)`,
				                                marginLeft:`-${btnWidth*(btnArr.length)}rpx`}" @click="itemClick(item)">
				    <slot v-bind:item="item"> </slot>
	 		      </view>
				   <view  class="t-slide-btn" v-for="(btn,num) in btnArr" :key="num" @touchstart="btnClick(btn.events,item)" 
				    :style="{width:btnWidth+'rpx',transform:item.isTouchMove?'translateX(0)':`translateX(${btnWidth*(btnArr.length)}rpx)`,
					         backgroundColor:btn.background,}">
					    <text class="t-slide-btn-text" :style="{color:btn.color}">{{btn.name}}</text>
				  </view>
	 	    </view>
	 	　</view>
	 	</view> 
	 </view>
	</view>
</template>

<script>
	export default {
		props:{
			//单行高度
			height:{
				type : String,
				default:'auto'
			},
			//按钮宽度
			btnWidth: {
				type : Number,
				default:200
			},
			//按钮数组
			btnArr: {
				type : Array,
				default:function () {
				return [
					// {
					// 	name:'编辑',
					// 	background:'#00aaff',
					// 	color:'#fff',
					// 	events:'edit'
					// },
					{
						name:'删除',
						background:'#E53B22',
						color:'#fff',
						events:'del'
					}
				]
			  }
			},
		},
		data() {
			return {
				items:[],
				startX: 0, //开始坐标
				startY: 0,//开始Y坐标
				flag:false, 
			}
		},
		
		methods: {
			//点击单行
			itemClick(item){
				setTimeout(()=>{
					if(this.flag){this.$emit('itemClick',item)}
				},100)
			},
			//点击按钮
			btnClick(name,item,event){
				this.$emit(name,item)
			},
			//赋值
			assignment(data){
				data.forEach(val=>{this.$set(val,'isTouchMove',false)})
				this.items=data
			},
			touchstart: function (e,item) {
				this.flag=true
				//如果点击的行为滑开行   不执行点击事件
				if(item.isTouchMove){this.flag=false}
			    //开始触摸时 重置所有删除
				this.items.forEach((v, i)=>{
					//只操作为true的
					if (v.isTouchMove){v.isTouchMove = false}
			    })
				//  #ifdef APP-PLUS||H5||MP 
				this.startX=e.changedTouches[0].clientX
				this.startY=e.changedTouches[0].clientY,
				// #endif 
				// #ifdef APP-NVUE
				this.startX=e.changedTouches[0].screenX
				this.startY=e.changedTouches[0].screenY,
				// #endif 
				this.items=this.items
			   
			  },
			  //滑动事件处理
			  touchmove: function (e) {
				  this.flag=false
				  let that=this
			      let index = e.currentTarget.dataset.index //当前索引
			      let startX = this.startX //开始X坐标
			      let startY = this.startY //开始Y坐标
				  // #ifdef APP-PLUS||H5||MP 
				  var touchMoveX = e.changedTouches[0].clientX//滑动变化坐标
				  var touchMoveY = e.changedTouches[0].clientY//滑动变化坐标
				  // #endif 
				  // #ifdef APP-NVUE
				  var touchMoveX = e.changedTouches[0].screenX//滑动变化坐标
				  var touchMoveY = e.changedTouches[0].screenY//滑动变化坐标
				  // #endif 
			      //获取滑动角度
			      let angle = this.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
			      this.items.forEach(function (v, i) {
			        v.isTouchMove = false
			        //滑动超过60度角 return
			        if (Math.abs(angle) > 60) return;
			        if (i == index) {
			          if (touchMoveX > startX) //右滑
						that.$set(that.items[i],'isTouchMove',false)
			          else //左滑
						that.$set(that.items[i],'isTouchMove',true)
			        }
			      })
			    },
				 angle: function (start, end) {
				    var X = end.X - start.X,
				        Y = end.Y - start.Y
				    //返回角度 /Math.atan()返回数字的反正切值
				    return 360 * Math.atan(Y / X) / (2 * Math.PI);
				 },
		}
	}
</script>

<style lang="scss" scoped>
.t-slide-box{
	border-bottom-width:1rpx;
	border-bottom-style:solid;
	border-bottom-color:#ececec;
}
.t-slide-area{
	flex:1;
}
.t-slide-view{
	flex:1;
}
.t-touch-item {
	font-size:24rpx;
	/*  #ifdef APP-PLUS||H5||MP  */
	display: flex;
	/*  #endif  */
	flex:1;
	flex-direction:row;
	justify-content: space-between;
	overflow: hidden;
}
.t-slide-content {
	flex:1;
	line-height:44rpx;
	transition-property: transform;
	transition-duration:0.3s;
} 
.t-slide-btn { 
	font-weight: bold;
	/*  #ifdef APP-PLUS||H5||MP  */
	display: flex;
	/*  #endif  */
	flex-direction:row;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	transition-property: transform;
	transition-duration:0.3s;
}
.t-slide-btn-text{
	font-size: 24rpx;
	color: #000;
} 
</style>