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>

总结

以上所述是小编给大家介绍的vue 下列表侧滑操作实例代码详解网站的支持！

来源：https://blog.csdn.net/wzzehui/article/details/81171071