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


Posted in Javascript onNovember 19, 2020

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

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

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

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

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

细节点:

(1)scroll-view实现横向滑动,这个微信文档写的不是很详细

第一步,wxml中在scroll-view控件中,写上 scroll-x

<scroll-view scroll-x class='scroll-container'>
</scroll-view>

第二步,要在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。

<scroll-view scroll-x class='scroll-container' scroll-left='{{scroll_left}}'

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

代码如下:

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

<view>
 <block wx:for='{{items}}' wx:key=''>
 <scroll-view scroll-x class='scroll-container' scroll-left='{{scroll_left}}'>
  <text class='content {{done1}}'>{{item}}</text>
  <text class='del' data-content='{{index}}' bindtap='del'>删除</text>
  <text class='done' data-content='{{index}}' bindtap='done'>完成</text>
 </scroll-view>
 </block>
</view>

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

}

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prettify 代码高亮着色器google出品
Dec 28 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 #Javascript
Javascript中window.name属性详解
Nov 19 #Javascript
JavaScript实现图片合成下载的示例
Nov 19 #Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 #Vue.js
vue 插槽简介及使用示例
Nov 19 #Vue.js
微信小程序实现点击导航条切换页面
Nov 19 #Javascript
详解Vue的mixin策略
Nov 19 #Vue.js
You might like
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
一些不错的js函数ajax
2008/08/20 Javascript
js 小数取整的函数
2010/05/10 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
Python爬豆瓣电影实例
2018/02/23 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
python实现列表的排序方法分享
2019/07/01 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
2014年关于两会精神的心得体会
2014/03/17 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书