微信小程序实现列表左右滑动

做微信小程序开发，和app一样经常会用到列表左右滑动操作（删除等），目前微信小程序官方没有提供相应的控件。

只能我们自己来做，方法很多，我这里给个思路，仅供参考，欢迎讨论。

1、我们可以把列表的元素放在scroll-view控件中，并且让scroll-view实现横向滑动

2、把列表内容项的宽度占满手机宽度，利用rpx特性（自适应屏幕），默认iphon6就是750rpx，只要设置大于等于750rpx就可以。

3、监听滑动后列表操作事件，即可

细节点：

（1）scroll-view实现横向滑动，这个微信文档写的不是很详细

第一步，wxml中在scroll-view控件中，写上 scroll-x 。         scroll-view里面的元素块，使用display: inline-flex;

第二步，要在wxss样式文件中增加上white-space: nowrap;

.scroll-container{

height: 200rpx;

background-color: floralwhite;

margin-top: 20rpx;

display: flex;

flex-direction: row;

align-items: center;

white-space: nowrap;

width: 100%;}

---

第三步：scroll-view 默认滑动的时候，是有个线条的。体验不好，去掉。大家可以对比下效果

::-webkit-scrollbar{ width: 0; height: 0; color: transparent;} 

（2）比如滑动删除第一条数据后，第二条数据的默认是处于滑动后状态，把操作项都显示出来了，建议每次操作完，把scroll-view的位置复原。修改scroll-left的值就好，我每次操作完，就把该值设置为0。

（3）列表内容可能会超出屏幕默认值，我这个例子是单行显示的，所有只要文字大于一定数量就截取。单独写了个函数把数据处理了下，这个可以实际情况实际处理。

代码如下：

---

wxml：注意class  done1是为了做完成后效果，这里只是演示就简单实现了下，实际应该针对对应的列表进行处理，可以考虑把原数据做成数组字典。 /*data-content 是为了删除的时候，知道是删除了哪一行*/

 

   

      {{item}}

      删除

      完成

   

 

wxss：

::-webkit-scrollbar{

  width: 0;

  height: 0;

  color: transparent;

}

.scroll-container{

  height: 200rpx;

  background-color: floralwhite;

  margin-top: 20rpx;

  display: flex;

  flex-direction: row;

  align-items: center;

  white-space: nowrap;

  width: 100%;

}

.content{

  padding-left: 20rpx;

  display: inline-block;

  line-height: 200rpx;

  font-size: 40rpx;

  width: 750rpx;

}

.del{

  display: inline-flex;

  width: 200rpx;

  height: 200rpx;

  line-height: 200rpx;

  align-items: center;

  justify-content: center;

  background-color: red;

  color: white;

}

.done{

  display: inline-flex;

  width: 200rpx;

  height: 200rpx;

  line-height: 200rpx;

  align-items: center;

  justify-content: center;

  background-color: green;

  color: white;

}

.done1{

  text-decoration: line-through;

  color: gainsboro;

}

js：

// pages/test06/test06.js

//hhString是为了处理下列表内容的，超出了就是用...显示，可以注释掉不用

import {hhString} from '../../utils/util.js';

Page({

  /**

  * 页面的初始数据

  */

  data: {

    items: ['我是第一条测试数据', '我是第二条测试数据', '我是第三条测试数据 ', '我是第四条测试数据', '我是第五条测试数据 ', '我是第六条测试数据，数据很多很多很多很多很多', '我是第七条测试数据', '我是第八条测试数据', '我是第九条测试数据'],

    scroll_left:'0rpx',

  },

  /**

  * 生命周期函数--监听页面加载

  */

  onLoad: function (options) {

    //hhString是为了处理下列表内容的，超出了就是用...显示，可以注释掉不用

    this.setData({

      items:hhString(this.data.items)

    })

  },

  del:function(event){

    //event.currentTarget.dataset.content获取到列表的所在的行号

    //splice 删除数组数据函数，第一个参数是位置，第二个是个数

    this.data.items.splice(event.currentTarget.dataset.content,1);

    this.setData({

      items: this.data.items,

      scroll_left:'0rpx'

    });

  },

  done: function (event) {

    //这里简易实现了下效果，没有针对对应的行号，实际业务再修改

    this.setData({

      scroll_left: '0rpx',

      done1: 'done1'

    });

  },

})

util->util.js

const hhString = (data)=>{

  let hstring = [];

  for(let val of data){

    if(val.length>10){

      val = val.substring(0,10);

      val = val+'...'

    }

    hstring.push(val);

  }

  return hstring;

}

module.exports = {

  hhString:hhString

}