先看效果图
实现方式:
使用 scroll-view 标签,进行横向滑动,达到左滑出现删除按钮,
注:如果不是使用uni-app或者小程序框架,没有 scroll-view 组件的话可以通过CSS实现哦
下面看uni-app的实现代码:
<template>
<view class="page">
<view class="centent">
<view class="tabs p_r">
<view class="tabItem" @click="tabIdx=index" :class="tabIdx==index?'tabItemOn':''"
v-for="(item,index) in tabs">
{{item}}
<view v-if="tabIdx==index" class="tabItemOnX">
</view>
</view>
</view>
<view class="list">
<view v-for="(item,index) in lists">
<scroll-view class="listItem " scroll-x="true">
<view class="scroll-view">
<view class="itemCentent" @touchend="touchend" @touchstart="touchstart"
:class="listIdx==index?'listItemOn':''">
<view class="p_r">
<image class="listItIcon" :src="listItIcon" mode=""></image>
<view class="listItTxt">
{{item}}
</view>
<img class="rrr" :src="r_2" />
</view>
<view class="icons p_r">
<image class="zan_1" :src="zan_1"></image>
<view class="mun">
5
</view>
<image class="see_2" :src="see_2"></image>
<view class="mun">
5
</view>
</view>
</view>
<view class="delete">
删除
</view>
</view>
</scroll-view>
</view>
</view>
</view>
<FaqTabbar @changeTab="changeTab"></FaqTabbar>
</view>
</template>
<script>
import Search from './components/search.vue';
import faqTabbar from './components/faqTabbar.vue';
export default {
components: {
Search,
faqTabbar
},
data() {
return {
tabs: [],
tabIdx: 0,
listIdx: 0,
touchS: '',
touchN: '',
img_r_1: this.$FAQ_PATH + 'r_1.png',
img_r_3: this.$FAQ_PATH + 'r_3.png',
zan_1: this.$FAQ_PATH + 'zan_1.png',
zan_2: this.$FAQ_PATH + 'zan_2.png',
see_2: this.$FAQ_PATH + 'see_2.png',
listItIcon: this.$FAQ_PATH + 'ask.png',
collection: this.$FAQ_PATH + 'collection.png',
r_2: this.$FAQ_PATH + 'r_2.png',
lists: [],
};
},
onLoad(option) {
this.$common.Init.call(this);
var tabs = ['综合', '疫苗政策', '特殊人群', '接种程序', '不良反应']
this.tabs = tabs;
var lists = ['2021版国家免疫规划中关于放宽补种限制 变化如何?', '脊灰疫苗免疫程序有什么变化?', '麻腮风疫苗免疫程序有什么变化?']
this.lists = lists
},
methods: {
touchstart(e) {
this.touchS = e.changedTouches[0].pageX
},
touchend(e) {
let start = this.touchS
let end = e.changedTouches[0].pageX
console.log(start)
console.log(end)
if (start < end - 50) {
console.log('右滑')
} else if (start > end + 50) {
console.log('左滑')
}
},
},
}
</script>
<style lang="scss" scoped>
.page {
width: 100vw;
height: 100vh;
background-color: #F4F4F4;
padding: 110rpx 0;
}
.list {
margin-top: 20rpx;
.listItem {
width: 100%;
height: 160rpx;
margin-bottom: 10rpx;
.scroll-view{
width: 125%;
display: flex;
flex-direction: row;
}
.delete {
width: 24%;
height: 160rpx;
line-height: 160rpx;
background-color: #c19a35;
position: relative;
color: #fff;
text-align: center;
border-radius: 10rpx 0 0 10rpx;
left: 1%;
}
.itemCentent {
width: 100%;
font-size: 26rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #492845;
position: relative;
background-color: #fff;
margin-bottom: 14rpx;
height: 160rpx;
}
.icons {
position: relative;
left: 498rpx;
width: 160rpx;
top: 24rpx;
.zan_1 {
width: 22rpx;
height: 20rpx;
margin-right: 4rpx;
}
.see_2 {
width: 26rpx;
height: 20rpx;
margin-left: 60rpx;
}
.mun {
margin-top: -12rpx;
margin-left: 6rpx;
color: #9C9C9C;
}
}
.rrr {
width: 12rpx;
height: 22rpx;
position: absolute;
left: 670rpx;
margin-top: 40rpx;
// transform: rotate(135deg);
}
.listItIcon {
width: 34rpx;
height: 34rpx;
margin-left: 60rpx;
margin-top: 40rpx;
}
.listItTxt {
margin-left: 20rpx;
margin-top: 24rpx;
max-width: 506rpx;
}
}
}
.tabs {
justify-content: space-around;
margin-top: 26rpx;
width: 94vw;
padding: 0 3vw 8rpx 3vw;
border-bottom: 1rpx solid #d0d0d0;
.tabItem {
font-size: 26rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #492845;
position: relative;
justify-content: center;
display: -webkit-flex;
}
.tabItemOn {
font-size: 30rpx;
font-family: Source Han Sans CN;
font-weight: 500;
color: #492845;
}
.tabItemOnX {
width: 40rpx;
height: 4rpx;
position: absolute;
margin: auto;
top: 50rpx;
background-color: #C19A35;
}
}
</style>