当前位置： 首页 > news >正文

咸虾米之一些快捷方式的操作，一行方块的左右滑动,方块在一区域内的任意移动

news 文章来源：https://blog.csdn.net/qq_44821064/article/details/132041474 2025/5/11 5:14:08

由于本着只学习微信小程序的目的，上面的几篇博文都是跟着黑马程序的课程走的！后面的就讲解uni-app的实验呢！一个人的精力是有限的，于是换了们课程继续深造微信小程序！！！

   

以下是在 .wxml中的一些

 以下是view三层嵌套的快捷操作方式！

.box>.inner>.row

最外层是 class类型为box的view  其次是class类型为inner的view ,最里面的是class类型为row的view!

 

view>view       实现view内嵌套view

 

 

 .inner  创建了一个class为inner     的view

 

下面是微信小程序<view>组件中的属性hover-class的应用！ hover ：盘旋，徘徊，处于不稳定的状态，上下波动，左右摇摆！

点击前和点击后颜色变化不同！

点击前是 class=“name” 的图框，点击后是 hove-class ="bucuo“的图框！！！

 

 

emmet语法的使用，和以后得加强了解！

.row{$}*8是   emmet语法规则，这个规则其实学习起来又是一个知识点！！！ 

 

下面的演示的是左右滑动的 方格

实现滑块移动，

.myScroll类 属于大类

包含其中的row类

row类中使用display: line-block  将保留元素的高度和宽度！

.myScroll类中的white-space 是元素到了显示框的边上也不会自动换行

具体网上搜索 css中的inline-block  和white-space的介绍！！！

下面演示的是上图中文字textd只能在灰色区域移动！！！

在wxml中 写下style类型中文段，竟然等同于在wxss中写的代码

这点需要搞懂！！！

 

在.wxml中写下的这段代码
<movable-area style="width: 400rpx; height: 400rpx; margin: 50rpx;background-color: #ccc;">
<movable-view direction="all" x="20" y="40">
textd
</movable-view >
</movable-area>
在wxss中的代码movable-area {height: 400rpx;width: 400rpx;margin: 50rpx;background-color: #ccc;}

有A,B，C盒子,  C是B盒的子盒！用<root-protal>将C盒分离出来，不受B盒一些因素的限制！！！

wxml中out这个大盒子中盒子box1 ,box2 并级。   盒子box2中含有mask盒子

这里使用<root-protal>这个属性将box2中的盒子mask单独分离出来呢，

前提  ：    box1的 z-index ： 10      box2的z-index : 9   

                  box2中mask 默认是可以覆盖box2

但由于 box1中的z-index大些，是覆盖不了box1的！

这里提供两种解决办法： 1.将box2的z-index提高  2.将mask 用root-protal单独分离出来，变成一个自由的子树，不受管控 按着自己的想法去搞！！！

 

 

相关文章：

咸虾米之一些快捷方式的操作，一行方块的左右滑动,方块在一区域内的任意移动

由于本着只学习微信小程序的目的&#xff0c;上面的几篇博文都是跟着黑马程序的课程走的&#xff01;后面的就讲解uni-app的实验呢&#xff01;一个人的精力是有限的&#xff0c;于是换了们课程继续深造微信小程序&#xff01;&#xff01;&#xff01; 以下是在 .wxml中的一些…...

编程日记 2023/9/1 9:26:52

Linux 高级指令

十个常用高级Linux指令、其具体用法和示例&#xff1a; 1.grep&#xff1a;用于搜索指定文本内容&#xff0c;可以通过正则表达式匹配搜索。 用法示例&#xff1a;在当前目录下搜索包含关键词“hello”的文件并列出文件名&#xff1a; grep -r "hello" 2.find&a…...

编程日记 2023/9/1 9:25:51

江苏移动基于OceanBase稳步创新推进核心数据库分布式升级

*本文首发自《中国电信业》 数字经济时代&#xff0c;数据库作为企业核心数据存储、处理、挖潜等方面的关键载体&#xff0c;重要性日益凸显。对于运营商而言&#xff0c;数据库具有行业用户数量多、访问数量多、业务复杂度高、数据安全性高、响应要求性高以及需要 7*24 小时服…...

编程日记 2023/9/1 9:24:50

6. 删除顺序表中的重复元素

p17 6. 删除顺序表中的重复元素 #include<stdio.h> #include<stdlib.h> #define MaxSize 100 typedef struct {int* data;int capacity;int length; }SeqList;int InitList(SeqList &L) {L.data (int*)malloc(MaxSize * sizeof(int));L.capacity MaxSize;L.l…...

编程日记 2023/9/1 9:23:49

Vue——axios的二次封装

文章目录 一、请求和传递参数1、get 请求2、post 请求3、axios 请求配置 二、axios 的二次封装1、配置拦截器2、发送请求 三、API 的解耦1、配置文件对应的请求2、获取请求的数据 四、总结 一、请求和传递参数 在 Vue 中&#xff0c;发送请求一般在 created 钩子中&#xff0c…...

编程日记 2023/9/1 9:22:47

JavaScript Web APIs -03 事件流、事件委托、其他事件（加载、滚动、尺寸）

Web APIs - 03 文章目录 Web APIs - 03事件流捕获和冒泡阻止冒泡 事件委托其他事件页面加载事件元素滚动事件页面尺寸事件 元素尺寸与位置 进一步学习 事件进阶&#xff0c;实现更多交互的网页特效&#xff0c;结合事件流的特征优化事件执行的效率 掌握阻止事件冒泡的方法理解事…...

编程日记 2023/9/1 9:21:46

QT DAY 2

window.cpp #include "window.h" #include<QDebug> #include<QIcon> Window::Window(QWidget *parent) //构造函数的定义: QWidget(parent) //显性调用父类的构造函数 {//this->resize(430,330);this->resize(QSize(800,600));// this…...

编程日记 2023/9/1 9:20:45

ELK安装、部署、调试（三）zookeeper安装，配置

1.准备 java安装&#xff0c;系统自带即可 2.下载zookeeper zookeeper.apache.org上可以下载 tar -zxvf apache-zookeeper-3.7.1-bin.tar.gz -C /usr/local mv apache-zookeeper-3.7.1-bin zookeeper 3.配置zookeeper mv zoo_sample.cfg zoo.cfg /usr/local/zookeeper/con…...

编程日记 2023/9/1 9:19:42

企业级智能PDF及文档处理SDK GdPicture.NET 14.2 Crack

企业级智能PDF及文档处理SDK GdPicture.NET 提供了一组非常先进的 API&#xff0c;这些 API 利用了人工智能、机器学习和模糊逻辑算法等尖端技术。经过超过 15 年的持续研究和对创新的专注&#xff0c;我们的 SDK 已成为市场上针对PDF、OCR、条形码、文档成像和各种格式最全面的…...

编程日记 2023/9/1 9:18:41

应用程序管理工具

应用程序管理是 DevOps 的重要组成部分。它可以定义为在所有阶段监控和管理软件应用程序的可用性、运行状况、性能和功能的过程&#xff0c;包括规划、设计、构建、测试、部署、维护和更新。这意味着应用程序从概念到停止都受到监控。 应用程序管理的重要性 管理应用程序可确…...

编程日记 2023/9/1 9:17:41

当数据集较小时，调节学习率的方法

当数据集较小时&#xff0c;调节学习率的方法 当数据集较小时&#xff0c;调节学习率的方法可以参考以下步骤&#xff1a; 当数据集较小时&#xff0c;调节学习率的方法可以参考以下步骤&#xff1a; 先尝试一个较小的学习率&#xff0c;如0.001&#xff0c;或者根据经验设置一…...

编程日记 2023/9/1 9:16:39

JS实现数组的扁平化(ES6实现)----例子+难点解析

要求&#xff1a; 取出嵌套数组(多维)中的所有元素放到一个新数组(一维)中如: [1, [3, [2, 4]]] > [1, 3, 2, 4] 基础知识&#xff1a; arr.concat() 语法&#xff1a;数组.concat(其他数组) 作用&#xff1a;将其他数组和数组拼接在一起 返回值&#xff1a;拼接好的新数…...

编程日记 2023/9/1 9:15:37

git 提交错误，回滚到某一个版本

git log 查看版本号 commit 后面跟的就是版本号git reset --hard 版本号 &#xff08;就可以回滚到你要去的版本&#xff09;git push -f &#xff08;因为本地回滚了&#xff0c;所以和远程会差几个版本。所以这时候只有强制推送&#xff0c;覆盖远程才可以&#xff09;...

编程日记 2023/9/1 9:14:35

数据结构：八种数据结构大全

数据结构 1.1 数据结构概述 数据结构是计算机存储、组织数据的方式&#xff1b;通常情况下&#xff0c;精心选择的数据结构可以带来更高的运行或者存储效率。数据结构的优良将直接影响着我们程序的性能&#xff1b;常用的数据结构有&#xff1a;数组&#xff08;Array&#xff…...

编程日记 2023/9/1 9:13:34

Java正则表达式系列--Pattern和Matcher的使用

原文网址&#xff1a;Java正则表达式系列--Pattern和Matcher的使用_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍Java的正则表达式中的两个重要类的用法&#xff1a;Pattern和Matcher。 在Java中&#xff0c;java.util.regex包定义了正则表达式使用到的相关类&#xff0c…...

编程日记 2023/9/1 9:12:33

40个web前端实战项目，练完即可就业，从入门到进阶，基础到框架，html_css【附视频+源码】

当下前端开发可以说是一个比较火的职业&#xff0c;所以学习的人比较多&#xff0c;不管是培训还是自学都是希望通过前端可以找到一份好的工作&#xff0c;但是很多自学的朋友在自学过程中有些盲目&#xff0c;不仅大大降低了学习的效率&#xff0c;而且也会打击自己的学习热情…...

编程日记 2023/9/1 9:11:32

Erasure-Code(纠删码) 最佳实践

Erasure-Code(纠删码) 最佳实践 1. 纠删码原理 这个星球产生的数据越来越庞大&#xff0c;差不多2010年开始各大互联网公司大都上线了系统以应对数据膨胀带来的成本增长。Erasure-Code&#xff08;纠删码&#xff09;技术应用其中。典型如Google 新一代分布式存储系统colossu…...

编程日记 2023/9/1 9:10:30

USB 转 4 串口芯片 CH9104

产品概述&#xff1a; CH9104 是一款USB总线的转接芯片&#xff0c;支持最高6M波特率与硬件流控&#xff0c;支持USB配置功能&#xff0c;提供RS485方向控制与GPIO等信号引脚&#xff0c;可实现PC等平台扩展多串口或多个串口设备升级成USB口。CH9104实现 USB 转四个异步串口 U…...

编程日记 2023/9/1 9:09:28

java实现医院门诊排班与预约系统【代码】

文章目录 前言一、遇到的问题二、实现过程1.数据库设计2.实体类3.医生添加排班或修改排班方法4.患者预约方法5.患者修改预约6.患者取消预约 前言 该文章从实际需求出发&#xff0c;实现医生设置自身排班与患者预约功能。 一、遇到的问题 1、医生设置的排班表不能有时间上的冲…...

编程日记 2023/9/1 9:08:27

8.Redis-set

Set 常用命令saddsmemberssismemberscardspopsmovesrem集合间操作sinter 交集sinterstoresunion 并集sunionstoresdiff 差集sdiffstore 命令总结 内部编码应用场景使用 set来保存用户的“标签” set(集合)就是把一些有关联的数据放刀一起。 它与list的区别如下&#xff1a; 集合…...

编程日记 2023/9/1 9:07:25

电子厂生产管理系统解决方案

越来越多的企业开始意识到数字化转型的重要性。在这个过程中&#xff0c;生产型企业面临着许多挑战&#xff0c;例如如何提高生产效率、节省企业资源以及改善生产工艺流程和产品质量。有一种解决方案可以帮助企业应对这些挑战&#xff0c;那就是生产管理系统。 生产管理系统是一…...

编程日记 2023/9/1 9:06:24

ARM DIY（五）摄像头调试

前言 今天&#xff0c;就着摄像头的调试&#xff0c;从嵌入式工程师的角度&#xff0c;介绍如何从无到有&#xff0c;一步一步地调出一款设备。 摄像头型号&#xff1a;OV2640 开发步骤 分为 2 个阶段 5 个步骤 阶段一&#xff1a; 设备树、驱动、硬件 阶段二&#xff1a; 应…...

编程日记 2023/9/1 9:05:23

hadoop2.2.0伪分布式搭建

1.准备Linux环境 1.0点击VMware快捷方式&#xff0c;右键打开文件所在位置 -> 双击vmnetcfg.exe -> VMnet1 host-only ->修改subnet ip 设置网段&#xff1a;192.168.1.0 子网掩码&#xff1a;255.255.255.0 -> apply -> ok 回到windows --> 打开…...

编程日记 2023/9/1 9:04:21

高级IO(select、poll、epoll)

在介绍本文之前&#xff0c;先提出一个问题 什么是IO&#xff1f; 等数据拷贝 1.等 - IO事件就绪&#xff08;检测功能成分&#xff09; 2.数据拷贝 高效的IO就是&#xff1a;单位时间&#xff0c;等的比重越小&#xff0c;IO的效率越高 五种IO模型 IO模型&#xff1a; 阻塞式…...

编程日记 2023/9/1 9:03:19

Ceph基础知识和基础架构认识

1 Ceph基础介绍 Ceph是一个可靠地、自动重均衡、自动恢复的分布式存储系统&#xff0c;根据场景划分可以将Ceph分为三大块&#xff0c;分别是对象存储、块设备存储和文件系统服务。在虚拟化领域里&#xff0c;比较常用到的是Ceph的块设备存储&#xff0c;比如在OpenStack项目…...

编程日记 2023/9/1 9:02:17

【C++】快速排序的学习和介绍

前言 本篇文章我们先会学习快速排序这个算法&#xff0c;之后我们会学习sort这个函数 分治算法 在学习快速排序之前&#xff0c;我们先来学习一下分治算法&#xff0c;快速排序就是分治算法的一种&#xff0c;下面是分治算法的介绍&#xff0c; 分治算法&#xff0c;就是”…...

编程日记 2023/9/1 9:01:16

第九章 动态规划part12（代码随想录）

309.最佳买卖股票时机含冷冻期 1. 确定dp数组&#xff08;dp table&#xff09;以及下标的含义 dp[i][j]&#xff0c;第i天状态为j&#xff0c;所剩的最多现金为dp[i][j]。 2. 确定递推公式 拆分卖出股票状态是因为冷冻期前一天一定是具体卖出股票状态。 状态一 dp[i][0]&…...

编程日记 2023/9/1 9:00:15

ssm珠宝首饰交易平台源码和论文

ssm珠宝首饰交易平台源码和论文101 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&a…...

编程日记 2023/9/1 8:59:12

交互设计都有哪些准则？

UI交互设计的本质不是完全基于用户的需求&#xff0c;而是交互设计师需要学习根据用户描述的产品形式来了解用户需要什么。 在交互设计过程中&#xff0c;遵循科学交互设计的本质是整个交互设计过程的重要组成部分&#xff0c;这与产品使用过程中给用户带来的体验密切相关。本…...

编程日记 2023/9/1 8:58:10

【MySQL】从哪几个角度分析数据库失败的原因？

总体评估MySQL服务器感谢 &#x1f496; 总体评估 当发现数据库出现问题时&#xff0c;我们首先应该从全局的角度考虑架构中的所有组件。包括&#xff1a; 服务器&#xff08;数据库和应用程序&#xff09; 存储&#xff1a;存储故障可能导致关键信息丢失网络接口&#xff1a…...

编程日记 2023/9/1 8:57:09