uniapp点击进入详情页（加上搜索栏，以及滑动删除）

实现效果有个bug，就是列表从上往下删除正常，从下往上删除会出现报错，以及下面几个删除出现问题

在使用本地数据的情况下：实现效果如下：

<template>
	<view>		
        <!-- 搜索栏 -->
		<uni-search-bar radius="5" v-model="inputs" placeholder="搜索新闻" clearButton="auto" cancelButton="none" />
		<!-- 滑动操作 -->
		<uni-swipe-action>
			<!-- 新闻列表 -->
			<uni-list class="list-news">
				<view class="search" v-for="(item,index) of chatss" :key="index"
					@click="chats(item.id,item.title,item.note,item.time,item.url)">
					<uni-swipe-action-item :right-options="options" @click="onClick(index)">
						<image :src="item.url" mode="aspectFit" class="image-news"></image>
						<view class="time-news">{{item.time}}</view>
						<view class="title-news">{{item.title}}</view>
					</uni-swipe-action-item>
				</view>
			</uni-list>
		</uni-swipe-action>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 滑动操作
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d',
					}
				}],
				// 搜索栏值
				inputs: '',
				// 轮播图指示点
				current: 0,
				// 新闻列表
				chat: [{
						id: '1',
						title: '聂海胜谈中国航天员的未来：会刷新更多纪录',
						note: '27日，航天员聂海胜获得八一勋章。他说：“我很幸运，未来会有更多航天员刷新纪录，创造中国高度！”期待！',
						time: "2022-07-08 08:27",
						url: '/static/swiper/4.jpg'
					},
					{
						id: '2',
						title: '雷克萨斯LM车祸起火致1死2伤，200万元豪车为何会车门锁死？',
						note: '红星资本局消息，7月28日晚间，有博主爆料称，一台雷克萨斯LM 300h豪华MPV在广西贵港某路段发生了严重车祸',
						time: "2022-07-08 15:19",
						url: '/static/swiper/6.jpg'
					},
					{
						id: '3',
						title: '周三',
						note: '周三的新消息',
						time: "2022-07-08 11:48",
						url: '/static/swiper/8.png'
					},
				]
			}
		},
		computed: {
			// 搜索
			chatss() {
				return this.chat.filter(item => {
					// console.log(item)
					return item.title.indexOf(this.inputs) >= 0
				})
			}
		},
		methods: {
			// 新闻列表
			chats(res, aa, bb, cc, dd) {
				uni.navigateTo({
					url: "/fenbao/detail/detail?id=" + res + "&title=" + aa + "&note=" + bb + "&time=" + cc + "&url=" + dd
				})
			},
			// 滑动操作
			onClick(e) {
				/* 删除行 */
				this.chat.splice(e, 1)
				uni.showToast({
					title: '已删除',
					duration: 1500,
					icon: 'fail'
				})
			},
		}
	}
</script>

<style scoped>
	.list-news {
		width: 94%;
		margin: auto;
	}

	.search {
		margin-top: 10rpx;
		position: relative;
		height: 210rpx;
	}

	.image-news {
		display: inline-block;
		width: 200rpx;
		height: 200rpx;
	}

	.time-news {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
	}

	.title-news {
		width: 480rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		position: absolute;
		bottom: 10rpx;
		left: 220rpx;
	}
</style>

这是主页面的数据，将新闻的id,title,note,time,url数据全传过去

 详情页数据：

<template>
	<view style="width: 90%;margin:auto;">
		<view>
			新闻{{options.id}}：
			<text style="font-weight: 700;font-size: 40rpx;">{{options.title}}</text>
		</view>
		<view>
			时间：{{options.time}}
		</view>
		<view>
			内容：
			<view style="text-indent: 2em;">
				{{options.note}}
			</view>
		</view>
		<view>
			<image :src="options.url" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: null,
			}
		},
		onLoad(options) {
			// console.log(options)
			this.options = options
		},
		methods: {

		}
	}
</script>

<style>

</style>