vue滾動+滑動刪除標記（移動端）仿qq/微信

安裝組件

　　"vue-touch": "^2.0.0-beta.4",

main.js引入

　　import VueTouch from 'vue-touch'

　　Vue.use(VueTouch, {name: 'v-touch'})

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>