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 下列表侧滑操作实例代码详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！