vue 下列表侧滑操作实例代码详解

<template> <div class="lottery-management-wrapper">  <ul>   <li class="lottery-management-list-wrapper">    <div class="lottery-management-list" v-for="(item , index) in activityListData">     <div class="lottery-management-list-left" @click="detailOfTheActivity(item)">      <dl>       <dd>        <h3>{{item.activityName}}</h3>        <p>活动时间：{{item.beginTime}}至{{item.endTime}}</p>       </dd>       <dt :class="item.status == 3 ? 'txt-red': item.status == 0 ? 'txt-blue' : ''">{{item.status == 3 ? '进行中': item.status == 1 ? '已结束': item.status == 0 ? '待启用' : ''}}</dt>      </dl>     </div>     <div class="lottery-management-list-right">      <a @click="startActivityAlert = true;currentItem = item;currentIndex = index" v-if="item.status == 0">启用活动</a>      <span @click="delActivityAlert = true;currentItem = item;currentIndex = index" v-if="item.status == 1">删除活动</span>      <span @click="stopActivityAlert = true;currentItem = item;currentIndex = index" v-if="item.status == 3 || item.status == 0">结束活动</span>     </div>    </div>   </li>  </ul>  <div class="add-wrapper" @click="addAwardActivity">   <span class="iconfont icon-tianjia1"></span>   <span class="text">新增活动</span>  </div>  <h4>商户员工账号只有活动查看权限，没有活动操作权限</h4>  <transition name="fade">   <div class="mask-wrapper"      v-show="delActivityAlert"      @touchmove.prevent>    <tipsBox title="操作提示"         text1="是否删除当前活动"         button1="取消"         button2="确定"         @confirm="delActivity"         @cancel="delActivityAlert = false">    </tipsBox>   </div>  </transition>  <transition name="fade2">   <div class="mask-wrapper"      v-show="stopActivityAlert"      @touchmove.prevent>    <tipsBox title="操作提示"         text1="是否停止当前活动"         button1="取消"         button2="确定"         @confirm="stopActivity"         @cancel="stopActivityAlert = false">    </tipsBox>   </div>  </transition>  <transition name="fade3">   <div class="mask-wrapper"      v-show="startActivityAlert"      @touchmove.prevent>    <tipsBox title="操作提示"         text1="是否启用当前活动"         button1="取消"         button2="确定"         @confirm="startActivity"         @cancel="startActivityAlert = false">    </tipsBox>   </div>  </transition> </div></template><script> import TipsBox from 'components/tipsBox/TipsBox'; import {configs} from 'common/js/config.js'; import {baseAjaxParam, baseAjaxErr} from 'common/js/publicFn.js'; const activityListApi = configs.baseApi + '/marketing/rouletter/activityList'; const overActivityApi = configs.baseApi + '/marketing/rouletter/overActivity'; const delActivityApi = configs.baseApi + '/marketing/rouletter/delActivity'; const startActivityApi = configs.baseApi + '/marketing/rouletter/startActivity'; export default {  data () {   return {    delActivityAlert: false,    stopActivityAlert: false,    startActivityAlert: false,    activityListData: [],    currentItem: null,    currentIndex: null   };  },  methods: {   getActivityList () {    let data = baseAjaxParam(this);    this.$http.jsonp(activityListApi, {params: data}).then((res) => {     if (res.body.code === 0) {      this.activityListData = res.body.data;      this.setSlide();     } else {      baseAjaxErr(this, res);     }    }).catch(function (err) {     alert('服务器错误:' + err.status);     console.log(err);    });   },   setSlide () {    this.$nextTick(() => {     let list = document.getElementsByClassName('lottery-management-list');     if (list) {      if (this.currentIndex !== null) {       list[this.currentIndex].firstElementChild.style.marginLeft = '0';      }      for (let i = 0; i < list.length; i++) {       (() => {        let start = 0;        list[i].ontouchstart = function (e) {         start = e.touches[0].pageX;        };        list[i].ontouchmove = function () {         list[i].ontouchend = function (e) {          let end = e.changedTouches[0].pageX;          let rightWidth = list[i].lastElementChild.offsetWidth;          if (end < start) {           list[i].firstElementChild.style.marginLeft = -rightWidth + 'px';          }          if (end > start) {           list[i].firstElementChild.style.marginLeft = '0';          }         };        };       })(i);      }     }    });   },   // 查看详情   detailOfTheActivity (item) {    this.$router.push('/detailOfTheActivity?activityId=' + item.activityId);   },   // 删除活动   delActivity () {    if (this.$store.state.roleId !== '0' && this.$store.state.roleId !== 'ROL197001010800007e4b5ce2fe28308' && this.$store.state.roleId !== 'ROL197001010800004ca4238a0b92382') {     if (!this.$store.state.authList['AUT20180705181442eQbFSPyr7HTOKji']) {      this.$store.commit('popSet', {tips: '无权限操作', status: 1, time: 1500});      return;     }    }    this.delActivityAlert = false;    let data = baseAjaxParam(this);    data.activityId = this.currentItem.activityId;    this.$http.jsonp(delActivityApi, {params: data}).then((res) => {     if (res.body.code === 0) {      this.$store.commit('popSet', {tips: '删除动成功', status: 0, time: 1500});      this.getActivityList();     } else {      baseAjaxErr(this, res);     }    }).catch(function (err) {     alert('服务器错误:' + err.status);     console.log(err);    });   },   // 停止活动   stopActivity () {    if (this.$store.state.roleId !== '0' && this.$store.state.roleId !== 'ROL197001010800007e4b5ce2fe28308' && this.$store.state.roleId !== 'ROL197001010800004ca4238a0b92382') {     if (!this.$store.state.authList['AUT20180705181442eQbFSPyr7HTOKji']) {      this.$store.commit('popSet', {tips: '无权限操作', status: 1, time: 1500});      return;     }    }    this.stopActivityAlert = false;    let data = baseAjaxParam(this);    data.activityId = this.currentItem.activityId;    this.$http.jsonp(overActivityApi, {params: data}).then((res) => {     if (res.body.code === 0) {      this.$store.commit('popSet', {tips: '结束活动成功', status: 0, time: 1500});      this.getActivityList();     } else {      baseAjaxErr(this, res);     }    }).catch(function (err) {     alert('服务器错误:' + err.status);     console.log(err);    });   },   // 启用活动   startActivity () {    if (this.$store.state.roleId !== '0' && this.$store.state.roleId !== 'ROL197001010800007e4b5ce2fe28308' && this.$store.state.roleId !== 'ROL197001010800004ca4238a0b92382') {     if (!this.$store.state.authList['AUT20180705181442eQbFSPyr7HTOKji']) {      this.$store.commit('popSet', {tips: '无权限操作', status: 1, time: 1500});      return;     }    }    this.startActivityAlert = false;    let data = baseAjaxParam(this);    data.activityId = this.currentItem.activityId;    this.$http.jsonp(startActivityApi, {params: data}).then((res) => {     if (res.body.code === 0) {      this.$store.commit('popSet', {tips: '启用活动成功', status: 0, time: 1500});      this.getActivityList();     } else {      baseAjaxErr(this, res);     }    }).catch(function (err) {     alert('服务器错误:' + err.status);     console.log(err);    });   },   addAwardActivity () {    if (this.$store.state.roleId !== '0' && this.$store.state.roleId !== 'ROL197001010800007e4b5ce2fe28308' && this.$store.state.roleId !== 'ROL197001010800004ca4238a0b92382') {     if (!this.$store.state.authList['AUT20180705181442eQbFSPyr7HTOKji']) {      this.$store.commit('popSet', {tips: '无权限操作', status: 1, time: 1500});      return;     }    }    this.$router.push('addAwardActivity');   }  },  created () {   this.getActivityList();  },  components: {   TipsBox  } };</script><style lang="stylus" rel="stylesheet/stylus"> @import '../../../common/stylus/mixin' .lottery-management-wrapper {  width :100%;  position :absolute;  background-color :#ECF0F3;  min-height :100%;  .lottery-management-list-wrapper {   width :100%;   overflow hidden;   .lottery-management-list {    background-color :#fff;    margin-bottom cal(10);    overflow :hidden;    width :200%;    .lottery-management-list-left {     width :cal(750);     float :left;     transition: margin-left .4s;     dl {      overflow :hidden;      height :cal(128);      dd {       float left;       width :80%;       h3 {        font-size :cal(28);        color: #4A4A4A;        margin:cal(32) 0 0 cal(50);       }       p {        font-size : cal(18)        color:#4A4A4A;        margin:cal(16) 0 0 cal(50);       }      }      dt {       float :left;       width :20%;       color: #9B9B9B;       font-size :cal(26);       line-height :cal(128);      }      .txt-red {       color:#D0021B;      }      .txt-blue {       color:#4A90E2;      }     }    }    .lottery-management-list-right {     float :left;     overflow: hidden;     font-size :cal(24);     line-height :cal(128);     color :#ffffff;     text-align :center;     a {      float: left;      background-color :#70AEF6;      width :cal(190);      color :#ffffff;     }     span {      float: left;      width :cal(128);      background-color :#FE3A32;     }    }   }  }  .add-wrapper {   height: cal(100)   box-sizing: border-box   padding-top: cal(24)   margin-bottom: cal(72)   background: #fff   text-align: center   font-size: 0   margin-top :cal(20)   .icon-tianjia1 {    color: #fe6f3f    font-size: cal(54)    vertical-align: top    margin-right: cal(12)   }   .text {    line-height: cal(60)    vertical-align: top    color: #fe6f3f    font-size: cal(30)   }  }  h4 {   color: #D0021B;   font-size :cal(24);   text-align: center;   margin-bottom :cal(100);  }  .mask-wrapper {   position: fixed   left: 0   right: 0   bottom: 0   top: 0   background: rgba(0,0,0,.5)   &.fade-enter-active, &.fade-leave-active {    transition: all 0.2s linear   }   &.fade-enter,&.fade-leave-active{    opacity: 0   }   &.fade2-enter-active, &.fade2-leave-active {    transition: all 0.2s linear   }   &.fade2-enter,&.fade2-leave-active{    opacity: 0   }   &.fade3-enter-active, &.fade3-leave-active {    transition: all 0.2s linear   }   &.fade3-enter,&.fade3-leave-active{    opacity: 0   }  } }</style>