首页 > 编程语言 >小程序滑动删除

小程序滑动删除

时间:2023-08-06 18:35:35浏览次数:37  
标签:console 删除 res 程序 query 滑动 type setData

参考项目:国际择校小程序,组件:movableView, 提交版本:

效果:

使用了别人写的组件 , cell动态高度需要计算,这块稍微麻烦一点
计算高度代码:

properties: {

		item: {
			type: Object,
			value: {},
			observer: function (val) {
				console.log('---??', val,'type?', this.properties.typeId)

				switch (this.properties.typeId) { // 在属性里判断类型
					case 'school': 
						this.getSchoolCellHeight()
						break;
					default:
						this.getCellHeightArr()
						break;
				}
			}
		},
        typeId: {
			type: String,
			value: ''
		},
}

用选择器获取高度,设置高度:

	getCellHeightArr() {
			const query = wx.createSelectorQuery().in(this)
			query.select('.easyCell').boundingClientRect()
			query.exec((res) => {
				console.log('收藏cell位置', res)
				this.setData({
					boxHeight: res[0].height
				})
			})
		},

		getSchoolCellHeight() {
			const query = wx.createSelectorQuery().in(this)
			query.select('.scBox').boundingClientRect()
			query.exec((res) => {
				console.log('school位置', res)
				this.setData({
					boxHeight: res[0].height
				})
			})
		},

点击顶部的section,删除的红色按钮会闪烁,加了一个property,修复这个bug:

        clickSection:{
			type:Boolean,
			value:false,
			observer:function(){
				setTimeout(() => {
					
					this.setData({
						clickSection:false
					})
				}, 500);
			}
		}

在wxml里面判断删除按钮显示隐藏:

<view class="operations-content" wx:if="{{!clickSection}}">
		<!-- height: {{boxHeight-2}}px;  -->

		<view class="operation-button" catchtap="handleDelete" style="height: {{boxHeight-2}}px; line-height: {{boxHeight-2}}px;">
			删除
		</view>

		<!-- <view wx:elif="{{typeId == '5'}}" class="operation-button" catchtap="handleDelete" style="height: 200rpx; line-height: 200rpx;">
			删除
		</view>

		<view wx:else class="operation-button" catchtap="handleDelete" style="height: {{boxHeight}}px; line-height: {{boxHeight}}px;">
			删除
		</view> -->
	</view>

修复后:

标签:console,删除,res,程序,query,滑动,type,setData
From: https://www.cnblogs.com/tufei7/p/17609701.html

相关文章

  • 聊聊程序员的基本素养
    基本原则------知识储备,说白了要能做事情、能干活这其中包括很多细节1、技术名词拼写不规范无论是个人简历,还是技术文档,我经常看到拼写不规范的技术名词,例如JAVA、javascript、python、MySql、Hbase、restful。正确的拼写应该是Java、JavaScript、Python、MySQL、HBase、R......
  • 外卖点餐源码|点餐小程序源码h5
     外卖点餐源码 外卖点餐系统是一种软件,可以让餐馆、咖啡店或酒吧在线接受订单。它通常允许顾客选择和支付食物,然后在订单发出时提醒厨房。这是在员工和客户之间没有联系的情况下发生的。网上订购系统是一个过程,人们可以通过使用互联网,坐在家里或任何地方,从当地的一些餐......
  • Google Review评价被删除了,怎么恢复?【附详细操作指引】
    自从2022年初,谷歌推出Googlereviews的人工智能AI评论过滤器之后,在删除大量虚假Googlereviews的同时,连同许多正常顾客的Google评价也一起删掉了,这种情况经常发生,这引起很多Googlebusiness商家强烈不满。 对此,今年Google终于发布一个关于Googlereviews的表单求助功能,帮助Google......
  • 本地计算机上的mysql服务启动后停止,某些服务在未由其他服务或程序使用时将自动停止。M
    下载好mysql后,想要启动mysql服务时出现了以上问题。整了半天终于解决了,方案如下:1.首先进入到MySQL的安装目录下,每个人的安装目录可能会有所不同,比如我的是C:\ProgramFiles\MySQL\MySQLServer8.0;2.看一下与bin同级的目录中有没有data这个文件夹,若有,则把原有的data文件夹删掉......
  • 在 Spring Boot 应用程序中,可以通过命令行参数或环境变量来指定配置文件和日志文件的
    1、使用命令行参数java-jaryour-app.jar--spring.config.location=file:/path/to/application.properties--logging.file=/path/to/logs/your-app.log在上述命令中,--spring.config.location参数用于指定配置文件的位置,--logging.file参数用于指定日志文件的位置。2、使......
  • java202304java学习笔记第六十六天-ssm-mybatis的增删改查-修改和删除操作1
       ......
  • Java程序员的MacBookPro(14寸M1)配置备忘录
    欢迎访问我的GitHub这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos本篇概览欣宸的月俸虽然很低,但还是咬着牙攒够银子,入手了最低配置的MacBookPro14(M1芯片,刘海屏,丐版),经过一段时间折腾,终于可以用来写代码和博客了,这里将设置过程记录下来......
  • 微信小程序视图容器 view
    <viewclass="section"><viewclass="section__title">flex-direction:row</view><viewclass="flex-wrp"style="flex-direction:row;"><viewclass="flex-itembc_green">1&l......
  • C语言分支与循环(18) --- 编写一个关机程序
    一.编写一个程序,要求程序运行后电脑一分钟内自动关机,若用户输入:no则取消关机示例代码:#define_CRT_SECURE_NO_WARNINGS1#include<stdio.h>#include<windows.h>intmain(void){ printf("您的电脑将在一分钟内关机,若需要取消关机请输入no\n"); system("shutdown-s-t60");R......
  • 当没有STLINK的时候,用串口进行下载程序到stm32里操作步骤:
    https://www.bilibili.com/video/BV1th411z7sn?p=30&vd_source=791674f04f7270b40ba9c9d5a7e3281e前5min0、连接电路:1、打开软件:FlyMcu2、keil5导出.hex文件重新编译就出来了hex文件3、FlyMcu配置波特率等参数4、stm32跳冒切换+复位5、烧录6、stm32跳冒切换+复位......