vue 下列表侧滑操作实例代码详解
程序员文章站
2022-06-14 12:56:53
由于是上线的项目且已经按照数据逻辑去渲染了能看懂的看逻辑吧。有点多
效果如图
由于是上线的项目且已经按照数据逻辑去渲染了能看懂的看逻辑吧。有点多
效果如图
<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 下列表侧滑操作实例代码详解，希望对大家有所帮助
上一篇： 网站建设怎样做好优化工作
下一篇： 移动建站的5个技巧 让你建站更顺利