uniapp列表滑动操作（删除、编辑）

���篇文章结合了下拉刷新、上拉加载，以及每一条列表的左滑删除，这里的header和footer盒子样式我就不写了，光写了main。是上中下布局，中间是内容，废话不说了，直接上代码！

 .... {{index}} 数据加载中... 没有更多的数据... .... export default { data () { return { // 上拉刷新、下拉加载 trigger: false, loadingFlag: 1, // 左滑删除 options: [{ text: '取消', style: { backgroundColor: '#007aff' } }, { text: '确认', style: { backgroundColor: '#dd524d' } }] } }, methods: { // 上拉加载 lower () { console.log('触底加载11') }, // 下拉刷新 refresherrefresh () { const _that = this this.trigger = true setTimeout(() => { _that.trigger = false }, 3000) }, // 左滑删除 swipeClick (e) { console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮') }, swipeChange (e, index) { console.log('当前状态：' + e + '，下标：' + index) } } } .wrap { width: 100vw; height: 100vh; .header { // 这里的样式我就不写了 } .main { width: 100%; height: calc(100vh - 50px - 50px); background-color: pink; overflow: auto; // 这个是scroll-view的盒子样式，必须要有，要不然不会触发 触底滚动事件 .scrollbox { width: 100%; height: 100%; } // 加载更多 .loading-text { font-size: $uni-size-loading-text; text-align: center; line-height: 30px; background-color: yellow; } // 左滑删除 .uni-swipe { height: 40px !important; margin: 10px 0; .uni-swipe_box { height: 100%; } } } .main { // 这里的样式我就不写了 } }