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 相关文章推荐
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
javascript检测两个数组是否相似
May 19 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
WebPack基础知识详解
Jan 16 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
php你的验证码安全码?
2007/01/02 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
Python设计模式之门面模式简单示例
2018/01/09 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
const和static readonly区别
2013/05/20 面试题
搬家公司的创业计划书
2014/01/01 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
推普周活动总结
2014/08/28 职场文书
世界遗产导游词
2015/02/13 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis