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


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 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
网页自动跳转代码收集
Sep 27 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 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
国内咖啡文化
2021/03/03 咖啡文化
php全局变量和类配合使用深刻理解
2013/06/05 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
php use和include区别总结
2019/10/13 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
Es6 Generator函数详细解析
2018/02/24 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
python调用webservice接口的实现
2019/07/12 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
Promise静态四兄弟实现示例详解
2022/07/07 Javascript