邢台网站建设策划,石家庄工程职业学院,e京汕头第一网,尚层装饰公司官网移动端的执行顺序#xff1a;touchstart-touchmove-touchend-click
需求#xff1a;点击消息查看详情#xff0c;长按消息执行删除操作
点击事件正常触发#xff0c;触摸事件正常触发#xff0c;不会互相影响
问题#xff1a;再执行删除操作的时候会连带点…移动端的执行顺序touchstart-touchmove-touchend-click
需求点击消息查看详情长按消息执行删除操作
点击事件正常触发触摸事件正常触发不会互相影响
问题再执行删除操作的时候会连带点击事件一起执行
当使用touchstart.prevent的时候不会触发click事件但正常点击事件也不生效了
当使用touchstart.stop的时候不生效
在函数里使用e.preventDefault()也不生效
最后看到一篇文章用变量判断所以最后决定使用变量判断
templateview!-- 消息 --view v-for(item,index) in messagelist :keyindex classuni-message clickmessageCountFn(item) touchstarttouchstart(item.id) touchendtouchenduni-badge classuni-badge-left-margin :is-dotitem.messageStatus 0 :textitem.messageStatus 0?1:0 absoluterightTop sizesmallview classuni-imgimage src/static/other/messages.png mode/image/view/uni-badgeview classuni-countsview classuni-top uni-deftext classmees{{item.title}}/texttext{{item.createTime}}/text/viewview classuni-toptext{{item.content}}/text/view/view/viewview classuni-nomessage v-ifmessagelist.length 0image src/static/other/nomessage.png mode/imageview classtext暂无消息/view/view!-- tabbar --tabbar v-ifloadingTab//view
/templatescript setup
import {ref} from vue
import useUserStore from /store/user.js
import { API_URL } from /commponents/request/env
import tabbar from /commponents/tabbar/tabbar.vue
import api from /commponents/request/index;
import {onShow,onPullDownRefresh } from dcloudio/uni-app;
// tab---pina
let useStore useUserStore()
const messagelist ref([])
const Loop ref([])
// 控制tabbar显示
const loadingTab ref(false)
// 判断是否是点击事件
const isClick ref(true)
// 新消息数量
let messagenum ref(0)
// 初始化函数
const showFn (){messagenum.value 0loadingTab.value falseapi(wx.getMessageList,{PageIndex:1,PageSize:999}).then(res{uni.stopPullDownRefresh()messagelist.value res.data.rowsres.data.rows.forEach(item{if(item.messageStatus 0){// 新消息数量messagenum.value}})// 存到pina里面useStore.setMessagenum(messagenum.value)loadingTab.value true})
}
onShow((){showFn()
})// 下拉刷新
onPullDownRefresh(async (){await showFn()})
// 点击消息进入详情页
const messageCountFn (item){if(isClick.value){uni.navigateTo({url: /pages/message/messagecount?iditem.id});}
}
// 开始触摸---用于删除消息
const touchstart (id) {isClick.value trueclearInterval(Loop.value); //再次清空定时器防止重复注册定时器Loop.value setTimeout(function() {isClick.value falseuni.showModal({title: 删除,content: 请问要删除本条消息吗,success: function(res) {if (res.confirm) {uni.request({url:${API_URL}/client/delMessage?id${id},header: {Authorization:Bearer uni.getStorageSync(token)},method:DELETE,success(res){if(res.data.statusCode 200){uni.showToast({title: 删除成功,duration: 2000})showFn()}}})} else if (res.cancel) {}}});}.bind(), 1000);
}
// 触摸结束---用于删除消息
const touchend () {clearInterval(Loop.value);
}
/scriptstyle langscss.uni-nomessage{text-align: center;margin-top: 122rpx;box-sizing: border-box;.text{color: #999999;}image{width: 153px;height: 130px;}}.uni-message{display: flex;margin:10px;border-bottom: 1px solid #ccc;padding-bottom: 10px;// justify-content: space-evenly;.uni-img{width: 41.5px;height: 41.5px;border-radius: 10px;image{width: 41.5px;height: 41.5px;}}.uni-counts{width: 80%;margin-left: 10px;.uni-def{margin-bottom: 5px;}.uni-top{display: flex;justify-content: space-between;text{width: 80vw;display: inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-family: Source Han Sans CN;font-size: 14px;font-weight: normal;line-height: normal;text-align: left;letter-spacing: 0em;color: #999999;}.mees{color: #000;font-size: 15px;font-weight: 400;}}}}/style
