vue 下列表侧滑操作实例代码详解

2020-06-13 10:38:26易采站长站整理

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') {