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


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 相关文章推荐
JavaScript修改css样式style
Apr 15 Javascript
深入认识javascript中的eval函数
Nov 02 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
详解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
php5.2.0内存管理改进
2007/01/22 PHP
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
php include类文件超时问题处理
2015/02/06 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
JS交换变量的方法
2015/01/21 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
浅谈numpy库的常用基本操作方法
2018/01/09 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
致跳高运动员广播稿
2014/01/13 职场文书
党员创先争优活动总结
2014/05/04 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
摄影展策划方案
2014/06/02 职场文书
园林技术专业求职信
2014/07/28 职场文书
统招统分证明
2015/06/23 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
Python基础之元编程知识总结
2021/05/23 Python
Python编程super应用场景及示例解析
2021/10/05 Python
Elasticsearch 基本查询和组合查询
2022/04/19 Python
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers