微信小程序-可以用区域

简介      

        movable-view和movable-area是可移动的视图容器,在页面中可以拖拽滑动。

        本篇文章将会通过该容器实现一个常用的拖拽按钮功能。

使用效果

代码实现

side-view.wtml

布局见下面代码,left view为内容区域,right view为操作按钮,在使用时候只需要替换left和right 对应slot即可。

movable-area 宽度 为left宽度,movable-view宽度为left + right宽度

监听事件为鼠标点击和鼠标弹起事件。

<!--slide-view/slide-view.wxml-->
<movable-area class="container" style="width: {{width}}rpx;height: {{height}}rpx;">
  <movable-view direction="horizontal" class="movable-view" style="width: {{width + slideWidth}}rpx; height: {{height}}rpx;" inertia bind:touchend="onTouchEnd" 
  damping="100"
  out-of-bounds
  x = "{{x}}" 
  bind:touchstart="onTouchStart" >
    <view class="left" >
      <slot name= "left"></slot>
    </view>
    <view class= "right">
      <slot name="right"></slot>
    </view>
  </movable-view>
</movable-area>
side-view.js

       组件的state 为 x, x表示movable-view 水平位置,在鼠标弹起时候,若移动距离大于threshold,则设置x为-threshold,否则为0。

注意: 事件event 对应位置,大小单位为px,而我们设置的参数都是rpx,若对其计算时候,注意两者之间转换。


Component({
  /**
   * 组件的属性列表
   */
  options: {
    multipleSlots: true
  },
  properties: {
    //  组件显示区域的宽度,rpx
    width: {
      type: Number,
      value: 750
    },
    //  组件显示区域的高度,rpx
    height: {
      type: Number,
      value: 0
    },
    //  组件滑动显示区域的宽度,rpx
    slideWidth: {
      type: Number,
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
   
    x: 0
   
  },

  /**
   * 组件的方法列表
   */
  ready: function ready() {
    this.init();
  },
  ready: function () {
    this.initFunc()
  },

  methods: {
    initFunc: function(){
      // 获取右侧滑动显示区域的宽度
      var that = this;
      var query = wx.createSelectorQuery().in(this);
      query.select('.right').boundingClientRect(function (right) {    
        that._slideWidth = right.width * 2; // rpx
        that._threshold = right.width / 2; // px
        that.setData({
          width:750,
          height:100,
          slideWidth: that._slideWidth
        }) //触发渲染
      }).exec();
    },
    onTouchStart: function onTouchStart(e) {
      this._startX = e.changedTouches[0].pageX;
      console.log('startX:'+this._startX)
    },

    //  当滑动范围超过阈值自动完成剩余滑动
    onTouchEnd: function onTouchEnd(e) {
      this._endX = e.changedTouches[0].pageX; // px
      console.log('endX:'+this._endX)
      var _endX = this._endX,
          _startX = this._startX, 
          _threshold = this._threshold;
    
      if (_startX - _endX >= _threshold) {
        this.setData({
          x: -this._slideWidth
        });
      } else {
        this.setData({
          x: 0
        });
      } 
    },

    
  }
});

index.wtml

<!--index.wxml-->

<slide-view heigth = "100" width="750">
  <view class="left" slot = "left">
    这是一段文字
  </view>
  <view class="right" slot = "right" width = "300">
    <view class="read">已读</view>
    <view class="delete">删除</view>
  </view>
</slide-view>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/443570.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

进腾讯工作一个月,我想辞职了......

前几天&#xff0c;我在网上看到一个微博。 一个应届的校招生&#xff0c;目前入职腾讯&#xff0c;工作了一个月。这一个月给他的感受是大量的写测试用例&#xff0c;自己写测试用例的能力熟练了不少&#xff0c;测试技能倒是没有多大的提高&#xff0c;真正需要技术的工作却…

算法学习01:排序二分

算法学习01&#xff1a;排序&&二分 文章目录 算法学习01&#xff1a;排序&&二分前言需要记忆的模版&#xff1a;快速排序归并排序&#xff1a;整数二分&#xff1a;浮点数二分 一、排序1.快速排序2.归并排序&#xff1a; 二、二分1.整数2.浮点数 总结 前言 需要…

汽车协议学习

ⅠOBD 1.OBD接口 OBD有16个引脚&#xff0c;每个引脚的电压不同&#xff08;可以对应不同的协议&#xff09; 车端&#xff1a; 16- 9 (短一点点的) 8-1 &#xff08;长一点的&#xff09; 2.基于OBDⅡ的通信协议 CAN &#xff08;ISO-15765&am…

grafana table合并查询

注&#xff1a;本文基于Grafana v9.2.8编写 1 问题 默认情况下table展示的是一个查询返回的多个field&#xff0c;但是我想要的数据在不同的metric上&#xff0c;比如我需要显示某个pod的读写IO&#xff0c;但是读和写这两个指标存在于两个不同的metirc&#xff0c;需要分别查…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Marquee)

跑马灯组件&#xff0c;用于滚动展示一段单行文本。仅当文本内容宽度超过跑马灯组件宽度时滚动&#xff0c;不超过时不滚动。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 Ma…

一元函数微分学——刷题(26

目录 1.题目&#xff1a;2.解题思路和步骤&#xff1a;3.总结&#xff1a;小结&#xff1a; 1.题目&#xff1a; 2.解题思路和步骤&#xff1a; 归纳求解&#xff0c;把指数写成负数就比较容易看出来规律 3.总结&#xff1a; 归纳求解&#xff0c;把指数写成负数就比较容易…

【蓝桥杯】k倍区间

一.题目描述 二.问题分析 对于该问题&#xff0c;标签上写的是暴力&#xff0c;但是如果使用暴力的话&#xff0c;会超时。 首先&#xff0c;对于两个数a&#xff0c;b&#xff08;假设a小于b&#xff09;&#xff0c;若a与b对k取余后结果相同&#xff0c;则b-a可以整除k。 …

axios的详细使用

目录 axios&#xff1a;现代前端开发的HTTP客户端王者 一、axios简介 二、axios的基本用法 1. 安装axios 2. 发起GET请求 3. 发起POST请求 三、axios的高级特性 1. 拦截器 2. 取消请求 3. 自动转换JSON数据 四、axios在前端开发中的应用 五、总结 axios&#xff1a…

山泉还可以申请商标不,现阶段通过率如何!

在32类类别啤酒饮料是许多生产水企业主要申请注册的类别&#xff0c;那现在山泉在这个类别还可以申请注册商标不&#xff0c;山泉在这个类别基本上是通用词&#xff0c;首先是需要前面词具有显著性&#xff0c;没的相同或近似才可以。 经普推知产老杨检索发现&#xff0c;在32…

作业 字符数组-统计和加密

字串中数字个数 描述 输入一行字符&#xff0c;统计出其中数字字符的个数。 输入 一行字符串&#xff0c;总长度不超过255。 输出 输出为1行&#xff0c;输出字符串里面数字字符的个数。 样例 #include <iostream> #include<string.h> using namespace std; int m…

瑞_JVM虚拟机_类的生命周期

文章目录 1 JVM虚拟机概述2 类的生命周期2.1 加载阶段2.1.1 加载过程2.1.2 查看内存中的对象&#xff08;hsdb工具&#xff09; 2.2 连接阶段2.2.1 验证2.2.2 准备&#xff08;final特殊&#xff09;2.2.3 解析 2.3 初始化阶段\<client> ★★★2.4 使用阶段2.5 卸载阶段 …

不愧是华为出来的,太厉害了...

实习去了博彦科技&#xff08;外包&#xff09;&#xff0c;做的就是螺丝钉的活&#xff0c;后面还因为人效不佳&#xff0c;被开了。 正式毕业后去了另外一个做电子发票的公司&#xff0c;但是都是功能测试和一点点APP测试&#xff0c;然后经常被开发怼&#xff0c;测试毫无地…

筛选出等于1的式子

然后统计和归类 归类分行归类方法 算术符号归类 数字大小排序算术符号归类 import randomdef generate_expression(num_range, num_count, operators):nums random.sample(range(num_range[0], num_range[1]1), num_count)ops random.choices(operators, knum_count-1)expre…

考研复试要想顺利通关,务必掌握的一些问题

亲爱的学弟学妹们&#xff0c;大家好&#xff01; 我是研一的学姐&#xff0c;深知考研路上的艰辛与不易。如今&#xff0c;为了回馈广大考研学子&#xff0c;我决定将自己精心整理的考研复试资料拿出来与大家分享&#xff0c;希望能为你们的复试之路添砖加瓦&#xff0c;助你…

JS直接量及其相关对象

什么是直接量 直接量是指不需要创建对象就可以直接使用的变量。ES中的直接量主要有三种类型&#xff1a;表示字符串的string类型、表示数字的number类型和表示true/false的boolean类型。当我们直接将值赋给变量后&#xff0c;ES就会自动判断其类型&#xff0c;而且当参数发生变…

vulhub中Weblogic < 10.3.6 ‘wls-wsat‘ XMLDecoder 反序列化漏洞(CVE-2017-10271)复现

Weblogic的WLS Security组件对外提供webservice服务&#xff0c;其中使用了XMLDecoder来解析用户传入的XML数据&#xff0c;在解析的过程中出现反序列化漏洞&#xff0c;导致可执行任意命令。 访问http://your-ip:7001/即可看到一个404页面&#xff0c;说明weblogic已成功启动 …

缩放算法优化步骤详解

添加链接描述 背景 假设数据存放在在unsigned char* m_pData 里面&#xff0c;宽和高分别是&#xff1a;m_nDataWidth m_nDataHeight 给定缩放比例&#xff1a;fXZoom fYZoom&#xff0c;返回缩放后的unsigned char* dataZoom 这里采用最简单的缩放算法即&#xff1a; 根据比…

万用表你用对了吗?小白必读!

1&#xff0c;数字万用表类型 数字万用表分&#xff1a;手持万用表和台式万用表。 2&#xff0c;万用表基本介绍 &#xff08;1&#xff09;选择开关 万用表的选择开关是一个多档位的旋转开关&#xff0c;用来选择测量档位和量程。一般的万用表测量档位包括如下图&#xff1…

macOS上实现「灵动岛」效果

自从Apple iPhone推出了「灵动岛」功能后&#xff0c;用户们就被其优雅的设计和强大的功能所吸引。然而&#xff0c;作为macOS用户&#xff0c;我们一直在等待这一功能能够在我们的设备上实现。现在&#xff0c;随着新的应用程序的推出&#xff0c;我们终于可以在我们的Mac上体…

Java高频面试之Mysql篇

有需要互关的小伙伴,关注一下,有关必回关,争取今年认证早日拿到博客专家 请说下你对 MySQL 架构的了解&#xff1f; mysql是一个c/s架构的数据库管理系统, 客户端可以是图形化界面,也可以是命令行或者java等程序 服务端由一下组成部分 连接管理器:管理连接,管理线程,验证身…