锲子

微信小程序自定义左滑功能加上跳转,换成以往,左滑功能的逻辑一般是在js中实现,但在拖动方面,性能并不是那么的流畅。如今,官方新扩展了一套脚本语言wxs,在IOS设备上运行,性能会比JS快2~20倍,至于安卓上运行效率无差异。

构思

结合wxs,做左滑功能主要分为三个步骤:拖动开始=>拖动中=>拖动结束

让我们看看,这三个步骤需要做好哪些工作?

拖动开始

  1. 获取触发事件点的坐标数据
  2. 将坐标数据存到组件中,“拖动中”和“拖动结束”这两步骤要用上

拖动中

  1. 拿到拖动开始时存储的坐标数据
  2. 获取每一个拖动点的坐标数据,计算出与拖动开始的坐标数据的横坐标之差
  3. 根据计算出的横坐标之差加上当前左滑的距离,设置该组件的样式

拖动结束

  1. 拿到拖动开始时存储的坐标数据
  2. 获取离开时触发点的坐标数据,计算出与拖动开始的坐标数据的横坐标之差
  3. 根据计算出的结果,判断拖动是向左还是向右?最好设置好该组件的样式

代码片段

index.wxs

// 拖动开始时的事件
function lwstart(event,ins){
console.log("拖动开始"); // 获取事件触发点的坐标数据
var touch = event.touches[0] || event.changedTouches[0]
//存储坐标数据,后期使用
var moveE = ins.getState();
moveE.startX = touch.pageX;
moveE.startY = touch.pageY; //默认左滑当前的距离,也要存储起来
if (!moveE.rX) {
moveE.rX = 0;
} } // 拖动中时的事件
function lwmove(event, ins) {
//获取到该组件的id
var id = event.currentTarget.dataset.id;
//组件实例
var node = ins.selectComponent(id);
if(node){ // 获取拖动点的坐标数据
var touch = event.touches[0] || event.changedTouches[0]
//拿出拖动开始时存储的数据
var moveE = ins.getState(); //计算拖动点与拖动开始时的触发点之间的横坐标之差
var gap = touch.pageX - moveE.startX; //获取左滑的距离(拖动中不存储这个数据,而是拖动结束来存储这个数据)
var left = moveE.rX; //为向左滑动做处理,开始设置左滑的距离
if (gap < 0) {
// 设置组件向左滑的距离
node.setStyle({
"transform": "translateX(" + (gap + left) + "px)"
})
} console.log("拖动中", (gap + left));
}
} // 拖动结束时的事件
function lwend(event, ins) {
console.log("拖动结束"); //获取到该组件的id
var id = event.currentTarget.dataset.id;
//组件实例
var node = ins.selectComponent(id);
if(node){ // 获取离开点的坐标数据
var touch = event.touches[0] || event.changedTouches[0]
//拿出拖动开始时存储的数据
var moveE = ins.getState();
var x = touch.pageX; //计算拖动点与拖动开始时的触发点之间的横坐标之差
var gap = x - moveE.startX; //重新设置左滑的距离(最大是左滑区域的宽度:80,最小是0)
//根据算出来的数据判断是右滑还是左滑?
console.log(gap, "gggg");
if (Math.floor(gap) == 0||Math.floor(gap)==-1) {
console.log("调用导航方法");
//跟点击事件差不多了
// 调用js里的方法跳转就行
ins.callMethod('navfn', {
id: id
})
}
else if (gap < 0) {
// 左滑
// 设置左滑最大距离
node.setStyle({
"transform": "translateX(-80px)"
}) // 存储左滑距离
moveE.rX = -80;
} else if (gap > 0) {
//右滑
//设置左滑最小距离
node.setStyle({
"transform": "translateX(0px)"
})
// 存储左滑距离
moveE.rX = 0;
}
} } module.exports={
lwstart:lwstart,
lwmove:lwmove,
lwend:lwend
}

index.wxml

<!-- 导入wxs -->
<wxs module="test" src="./index.wxs"></wxs>
<!-- 作者有点懒,样式全是内联样式 -->
<!-- 我设置了两种组件的具体宽度(屏幕宽度和左滑宽度) -->
<!-- 不允许横向滚动 -->
<scroll-view style="width:{{ww}}px;"> <view wx:for="{{2}}" style="margin:10px 0;display:flex;align-items:center;width:{{ww+80}}px;transition:transform .3s;" bindtouchstart="{{test.lwstart}}" bindtouchmove="{{test.lwmove}}" bindtouchend="{{test.lwend}}" id="move{{index}}" data-id="#move{{index}}">
<!-- 内容区域 -->
<view class="con" style="width:{{ww}}px;height:80px;background-color:blue;"> </view> <!-- 左滑区域 -->
<view class="left" style="width:80px;height:60px;background-color:red;"> </view>
</view>
</scroll-view>

index..js

let that;

Page({
data: {
ww:400
},
onLoad: function () {
that=this;
wx.getSystemInfo({
success: function(res) {
that.setData({
ww:res.windowWidth
})
},
})
},
navfn(e){
console.log(e,"跳转");
wx.navigateTo({
url: '../nav/nav?id='+e.id,
})
}
})

预览效果

代码片段链接:https://developers.weixin.qq.com/s/r89ejJmP7ncM

运用wxs制作微信小程序左滑功能和跳转,性能更优越的更多相关文章

  1. 微信小程序左滑删除功能

    效果图如下: wxml代码: <view class="container"> <view class="touch-item {{item.isTou ...

  2. 微信小程序左滑删除

    <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index=&qu ...

  3. 微信小程序左滑删除未操作有复位效果

    1.wxml <!--pages/test/test.wxml--> <view class="page"> <movable-area class= ...

  4. 微信小程序左滑显示按钮demo

    wxml结构(删除部分代码): <view class="chapter-item" wx:for="{{klgData}}" data-index=&q ...

  5. 微信小程序在线制作 自己制作微信小程序

    小程序是个什么东西?怎么自己制作微信小程序?微信小程序在线制作难吗?最近老是听这类问题,耳朵都长茧子了. 百牛信息技术bainiu.ltd整理发布于博客园 接下来作为一个技术人员的角度就为大家分析一下 ...

  6. 微信小程序调用蓝牙功能控制车位锁

    第一次学用微信小程序,项目需要,被逼着研究了一下,功能是调用微信小程序的蓝牙功能,连接上智能车位锁,控制升降,大概步骤及调用的小程序接口API如下: 1.打开蓝牙模块 wx.openBluetooth ...

  7. 微信小程序新闻列表功能(读取文件、template模板使用)

    微信小程序新闻列表功能(读取文件.template) 不忘初心,方得始终.初心易得,始终难守. 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件 ...

  8. 微信小程序实战 购物车功能

    代码地址如下:http://www.demodashi.com/demo/12400.html 一.准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/ ...

  9. 微信小程序在线支付功能使用总结

    最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出 ...

随机推荐

  1. Ng项目安装到指定盘符

    全局安装 1.node.js 2.cnpm 3.typeScript 4.ng-cli 指定安装: 1.首先在想要的盘符内新建一个名字 例: D盘中新建一个angualr的文件夹 2.在开始菜单中输入 ...

  2. Spark 学习笔记之 union/intersection/subtract

    union/intersection/subtract: import org.apache.spark.SparkContext import org.apache.spark.rdd.RDD im ...

  3. Java面试----01.JavaSE

    1.面向对象和面向过程的区别 面向过程:面向过程性能比面向对象高. 因为类调用时需要实例化,比较消耗资源,所以当性能是最重要的考虑因素时,比如单片机.嵌入式开发.Linux/Unix等一般采用面向对象 ...

  4. 安装vant2.2.7版本报错These dependencies were not found: vant/es/goods-action-big-btn in ./src/config/vant.config.js......

    一.问题 前天,在使用vant的checkbox复选框的时候,注意到新增加一个全选功能,通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法.于是我就想用这个,但是按照上面的示例写 ...

  5. B-线性代数-距离公式汇总

    目录 距离公式汇总 一.欧式距离 二.曼哈顿距离 三.闵可夫斯基距离(Minkowski distance) 更新.更全的<机器学习>的更新网站,更有python.go.数据结构与算法.爬 ...

  6. opencv::积分图计算

    利用积分图像,可以计算在某象素的上-右方的或者旋转的矩形区域中进行求和.求均值以及标准方差的计算,并且保证运算的复杂度为O(). #include <opencv2/opencv.hpp> ...

  7. php注释的作用是什么?

    php注释的作用 1.解释代码功能: 2.调试程序. 说明:在代码中进行注释是很有必要的,规范的注释使的源代码更易于人类理解,可以帮助我们理解别人或者自己以前编写的代码. php怎么添加注释? 1.用 ...

  8. Vue项目多域名跨域

    在Vue项目中请求后台数据时,遇到的多域名跨域问题. 直接上代码: assetsSubDirectory: "static", assetsPublicPath: "/& ...

  9. python学习-流程控制(四)

    学习笔记中的源码:传送门 4.2if分支结构 if语句有三种形式: 如果 if 条件为“真”,程序就会执行 i f条件后面的多条语句:否则就会依次判断 elif 条件,如果 elif 条件为“真”,程 ...

  10. LIGHTX-CMS —— 基于 Node.js,Express.js 以及 SQLite 3 搭建的个人博客系统

    概述 LIGHTX-CMS 是我基于 Node.js,Express.js 以及 SQLite 3 搭建的个人博客发布系统. 项目本身可以拿来部署个人博客网站,同时我认为其也适合用以新手学习 Node ...