微信小程序长按历史记录的某一项出现X并且可以删除该项
时间: 2023-08-19 11:03:46 浏览: 185
微信小程序-长按拖动楼层、左右滑动出现删除按钮实现
是的,微信小程序的历史记录可以通过长按某一项来实现删除。具体实现方法如下:
1. 在WXML文件中,使用wx:for指令将历史记录渲染成列表。
2. 给每个历史记录项绑定一个长按事件,如:
```html
<view wx:for="{{historyList}}" wx:key="index" bindlongpress="deleteHistory">{{item}}</view>
```
3. 在JS文件中,实现deleteHistory函数,用来删除选中的历史记录项。
```javascript
Page({
data: {
historyList: ['历史记录1', '历史记录2', '历史记录3']
},
deleteHistory: function(e) {
var index = e.currentTarget.dataset.index; // 获取选中的历史记录项的索引值
var historyList = this.data.historyList;
historyList.splice(index, 1); // 删除选中的历史记录项
this.setData({
historyList: historyList
});
}
})
```
在上述代码中,我们首先通过e.currentTarget.dataset.index获取选中的历史记录项的索引值,然后使用splice方法从historyList数组中删除该项,最后通过setData方法更新页面数据。
4. 最后,为了让用户更加明确自己正在删除历史记录,我们可以在WXML中给每个历史记录项添加一个X图标,并使用CSS样式设置其样式,如:
```html
<view wx:for="{{historyList}}" wx:key="index" bindlongpress="deleteHistory" class="history-item">
<text>{{item}}</text>
<view class="delete-icon">X</view>
</view>
```
```css
.history-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10rpx;
background-color: #fff;
border-bottom: 1rpx solid #eee;
}
.delete-icon {
font-size: 28rpx;
color: #999;
}
```
阅读全文