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


Posted in Javascript onJuly 24, 2018

由于是上线的项目且已经按照数据逻辑去渲染了能看懂的看逻辑吧。有点多

效果如图

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

Javascript 相关文章推荐
图片上传即时显示缩略图的js代码
May 27 Javascript
详细讲解JS节点知识
Jan 31 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 Javascript
微信小程序实现电影App导航和轮播
Nov 30 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 #Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 #Javascript
JavaScript引用类型Array实例分析
Jul 24 #Javascript
详解微信小程序调起键盘性能优化
Jul 24 #Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 #Javascript
js+canvas实现验证码功能
Sep 21 #Javascript
微信小程序网络请求封装示例
Jul 24 #Javascript
You might like
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
php中转义mysql语句的实现代码
2011/06/24 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
php发送与接收流文件的方法
2015/02/11 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
Python聊天室程序(基础版)
2018/04/01 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
C# .NET面试题
2015/11/28 面试题
校园新闻广播稿
2014/01/10 职场文书
网上签名寄语活动留言
2014/01/18 职场文书
高中生学习计划书
2014/09/15 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
支教个人总结
2015/03/04 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
创业计划书之甜品店
2019/09/18 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
浅谈python中的多态
2021/06/15 Python