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

效果如图

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