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