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判断是否已经弹出页面
Oct 20 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
JavaScript 数组详解
Oct 10 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
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
PHP安装攻略:常见问题解答(二)
2006/10/09 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
jquery获取radio值实例
2014/10/16 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
nodeJS微信分享
2017/12/20 NodeJs
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
Python命名空间详解
2014/08/18 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
Delphi CS笔试题
2014/01/04 面试题
元旦寄语大全
2014/04/10 职场文书
大学生评语大全
2014/04/18 职场文书
法人委托书
2014/07/31 职场文书
升职自荐信范文
2015/03/27 职场文书
车间统计员岗位职责
2015/04/14 职场文书
计划生育责任书
2015/05/09 职场文书
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python