vue滚动+滑动删除标记（移动端）仿qq/微信

安装组件

main.js引入

1.页面代码
<template>
<div class="share">
<headall :appMenuName="$t('pay_attention_to_people')" :iconRight="iconRight" :backUrl="backUrl" @backOperate="backOperate"></headall>
<scroll class="scroll" :data='listData' v-if='listData'>
<div class="in-ul">
<div class="item" v-for='(item,index) in listData' :key="index">
<v-touch v-on:swipeleft="swiperleft(index)" v-on:swiperight="swiperright(index)" class="wrapper">
<div class="itemSwipe" :class="{swipeleft:itemTitleLeft&&(nowControlIndex==index&&(nowControlIndex>-1)),swipeleftNo:!itemTitleLeft}">
<div class="content">
<span class="userNameAccount">{{ item.userName }}({{item.account}})</span>
<span class="deptName">{{ item.deptName||''}}</span>
</div>
<div class="btnL del" @click="delUser(item)">删除</div>
<div class="btnL markEle">标记</div>
<div class="btnL move">移动</div>
</div>
</v-touch>
</div>
</div>
</scroll>
<router-view @getRefresh="getRefresh"></router-view>
</div>
</template><script>
import Vue from 'vue'
import headall from 'base/head/headAll'
import {
mixins
} from 'assets/js/mixins'
import scroll from 'base/scroll/scroll'
import i18n from 'assets/js/vi18n/i18n.js'
export default {
mixins: [mixins],
i18n,
data() {
return {
searchVal:'',
listData: [],
selectItemData: null,
nowControlIndex:-1,
itemTitleLeft:false,
backUrl:'/me/person',
iconRight:'icon-tianjia',
}
},
components: {
headall,
scroll,
},
methods: {
getRefresh(){
this.getSelectedUser();
},
backOperate(){
this.$router.push({
path: `/me/person/attention/add`
});
//清除滑动效果
this.itemTitleLeft = false;
this.nowControlIndex = -1;
},
swiperleft(index) {
//左滑
console.log('left');
this.nowControlIndex = index;
this.itemTitleLeft = true;
},
swiperright(index) {
//右滑
console.log('right');
this.itemTitleLeft = false;
this.nowControlIndex = -1;
},
getSelectedUser() {
/*获取邮件接收人以前的设置*/
let vm = this;
let getUserUrl = '/user/focusUsers';
this.ajaxSend(getUserUrl, {}).then(function (data) {
if (data.code === '00000000') {
vm.listData = data.payload.results.users;
}
});
},
delUser(item) {
/*列表中删除关注人*/
let vm = this;
let result = [];
let arr = vm.listData;
for (let i = 0; i < arr.length; i++) {
if (arr[i] != item) {
result.push(arr[i]);
}
}
vm.listData = result;
vm.saveSelectedUser();
//清除滑动效果
vm.itemTitleLeft = false;
vm.nowControlIndex = -1;
},
saveSelectedUser() {
//保存设置
let vm = this;
let arr = vm.listData;
let checkedId = [];
for (let i = 0; i < arr.length; i++) {
checkedId.push(arr[i].id);
}
let getUserUrl = '/user/saveFocusUser';
let params = {
focusUserIds: checkedId
};
this.ajaxSend(getUserUrl, params).then(function (data) {
if (data.code === '00000000') {
}
});
},
},
created() {
this.getSelectedUser();
},
}
</script><style scoped lang="stylus">
@import '~assets/stylus/veriable.styl'
@import "~assets/stylus/mixin.styl"
.share{
position absolute
top 0
bottom 0
left 0
right 0
z-index 15
background #f3f3f3
.scroll{
position absolute
overflow hidden
width 100%
top 3.2rem
bottom 0
background #fff
.in-ul{
width 100%
.item{
width 146%
overflow hidden
.itemSwipe{
display flex
flex 1
font-size .875rem
height 3rem
line-height 3rem
background #fff
border-bottom 1px solid #dedfe0
div{
background #fff
}
.content{
width 100%
display flex
flex-direction column
margin .25rem .25rem .25rem .5rem
line-height 1.5rem
font-size $font-size12
.userNameAccount{
font-size $font-size13
}
.deptName{
font-size $font-size12
color #999
} }
.btnL{
padding 1rem 0;
line-height 1rem
width 15%
text-align center
color #fff
}
.del{
background #ff3b30
}
.markEle{
background #ff9c00
}
.move{
background #c7c7cc
}
}
.swipeleft{
transform:translateX(-31%);
-webkit-transform:translateX(-31%);
-webkit-transition:all 0.3s;transition:all 0.3s;
}
.swipeleftNo{
-webkit-transition:all 0.3s;transition:all 0.3s;
}
}
}
}
}</style>

组件headAll
<template>
<div class="header">
<span class="iconfont" :class="iconLeft" @click="back"></span>
<span class="name" slot="appMenuName">{{appMenuName}}</span>
<span class="iconfont" :class="iconRight" @click="search"></span>
</div>
</template>
<script>
export default {
props:{
appMenuName:{
type:String,
default:'',
},
backUrl:{
type:String,
default:'',
},
iconLeft:{
type:String,
default:'icon-fanhui1',
},
iconRight:{
type:String,
default:'icon-soushuo',
},
typeVal:{
type:Number,
default: 0,
},
},
methods: {
back(){
this.$router.push({
path: `${this.backUrl}`
});
},
search(){
this.$emit('backOperate',this.typeVal);
}
}
}
</script><style scoped lang='stylus'>
@import '~assets/stylus/veriable.styl'
@import '~assets/stylus/mixin.styl'
.header{
headStyle()
justify-content space-between
.name{
font-size $font-size15
}
.iconfont{
padding 0.625rem
width 3rem
color #bfbfbf
font-size .875rem
font-weight normal
}
}</style>

组件scroll
<template>
<div ref="wrapper">
<slot></slot>
</div>
</template><script>
import BScroll from 'better-scroll'export default {
props:{
/* probeType的作用。
1 滚动的时候会派发scroll事件，会截流，就是不会实时的派发。
2 滚动的时候会实时派发scroll事件，不会被截流。
3 在重击的情况下仍然能实时派发scroll的事件。
*/
probeType:{
type:Number,
default:3
},
click:{
// 占击滚动的列表是否派发click事件。
type:Boolean,
default:true
},
scrollX:{
// 是否派发横向滚动事件。
type:Boolean,
default:false
},
listenScroll:{
// 是否派发滚动事件。
type:Boolean,
default:true
},
data:{
type:Array,
default:null //这里null其实是表明这个是一个任意类型。
},
pullup:{
// 是否派发滚动到底部的事件，用于上拉加载
type:Boolean,
default:false
},
pulldown:{
// 是否派发顶部下拉的事件，用于下拉刷新。
type:Boolean,
default:false
},
beforeScroll:{
// 是否派发列表滚动开始时的事件。
type:Boolean,
default:false
},
refreshDelay:{
// 当数据更新后刷新scroll的延时。
type:Number,
default:20
},
scrollEndx:{
type:Boolean,
default:false
}
},
methods:{
_initScroll(){
if(!this.$refs.wrapper){
return
}
// 初始化better-scroll
this.scroll=new BScroll(this.$refs.wrapper,{
probeType:this.probeType,
click:this.click,
scrollX:this.scrollX
})
// 是否派发滚动事件。
if(this.listenScroll){
this.scroll.on('scroll',(pos)=>{
this.$emit('scroll',pos);
})
}
// 是否派发滚动到底部的事件，用于上拉加载。
if(this.pullup){
this.scroll.on('scrollEnd',()=>{
if(this.scroll.y<=(this.scroll.maxScrollY+50)){
this.$emit('scrollEnd');
}
})
} // 是否派发顶部下拉事件，用下下拉刷新。
if(this.pulldown){
this.scroll.on('touchend',(pos)=>{
if(pos.y>50){
this.$emit('pulldown')
}
})
} // 是否派发列表滚动开始的事件。
if(this.beforeScroll){
this.scroll.on('beforeScrollStart',()=>{
this.$emit('beforeScroll')
})
} // 新增一个事件的判断，滚动结束时也会触发事件scrollEnd
if(this.scrollEndx){
this.scroll.on('scrollEnd',(pos)=>{
this.$emit("scrollEnd",pos);
})
}
},
refresh(){
this.scroll && this.scroll.refresh();
},
scrollTo(){
this.scroll && this.scroll.scrollTo.apply(this.scroll,arguments);
},
scrollToElement(){
this.scroll && this.scroll.scrollToElement.apply(this.scroll,arguments);
}
},
watch:{
data(){
setTimeout(() => {
this.refresh();
}, this.refreshDelay);
}
},
mounted () {
// mouted全部挂载完成后，调用初始化BScroll;
setTimeout(() => {
this._initScroll();
}, 20);
}
}
</script><style scoped lang="stylus" rel="stylesheet/stylus"></style>