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

news2024/11/23 5:02:28

由于本着只学习微信小程序的目的,上面的几篇博文都是跟着黑马程序的课程走的!后面的就讲解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单独分离出来,变成一个自由的子树,不受管控 按着自己的想法去搞!!!

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

leetcode 541.反转字符串II

⭐️ 题目描述 &#x1f31f; leetcode链接&#xff1a;https://leetcode.cn/problems/reverse-string-ii/ ps&#xff1a; 这道题描述的有点晦涩难懂&#xff0c;意思就是每隔k个反转k个&#xff0c;末尾不够k个时全部反转&#xff0c;开始就不够k个也全部反转。 代码&#…

C++day5(静态成员、类的继承、多继承)

一、Xmind整理&#xff1a; 二、上课笔记整理&#xff1a; 1.静态数据成员静态成员函数&#xff08;银行账户实例&#xff09; #include <iostream>using namespace std;class BankAccount { private:double balance; //余额static double interest_rate; //利率 p…

本地部署 Stable Diffusion(Mac 系统)

在 Mac 系统本地部署 Stable Diffusion 与在 Windows 系统下本地部署的方法本质上是差不多的。 一、安装 Homebrew Homebrew 是一个流行的 macOS &#xff08;或 Linux&#xff09;软件包管理器&#xff0c;用于自动下载、编译和安装各种命令行工具和应用程序。有关说明请访问官…

创建K8s pod Webhook

目录 1.前提条件 2.开始创建核心组件Pod的Webhook 2.1.什么是Webhook 2.2.在本地k8s集群安装cert-manager 2.3.创建一个空的文件夹 2.4. 生成工程框架 2.5. 生成核心组件Pod的API 2.6.生成Webhook 2.7.开始实现Webhook相关代码 2.7.1.修改相关配置 2.7.2.修改代码 2…

2023最新AI创作系统ChatGPT网站源码V2.6.0+详细图文搭建安装教程/GPT联网/支持ai绘画+Dall-E2绘画/支持MJ以图生图

一、AI系统 如何搭建部署AI创作ChatGPT系统呢&#xff1f;小编这里写一个详细图文教程吧&#xff01; SparkAi使用Nestjs和Vue3框架技术&#xff0c;持续集成AI能力到AIGC系统&#xff01; 程序核心功能 程序已支持ChatGPT3.5/4.0提问、AI绘画、Midjourney绘画&#xff08;…

Vue2向Vue3过度核心技术组件通信

目录 1 组件基础知识scoped解决样式冲突1.1 默认情况&#xff1a;1.2 代码演示1.3 scoped原理1.4 总结 2 组件基础知识data必须是一个函数2.1 data为什么要写成函数2.2 代码演示2.3 总结 3 组件通信3.1 什么是组件通信&#xff1f;3.2 组件之间如何通信3.3 组件关系分类3.4 通信…

leetcode 392. 判断子序列

2023.8.25 本题要判断子序列&#xff0c;可以使用动态规划来做&#xff0c;定义一个二维dp数组。 接下来就是常规的动态规划求解子序列的过程。 给出两种定义dp数组的方法。 二维bool型dp数组&#xff1a; class Solution { public:bool isSubsequence(string s, string t) …

升级Go 版本到 1.19及以上,Goland: file.Close() 报错: Unresolved reference ‘Close‘

错误截图 解决方法 File -> Settings -> Go -> Build Tags & Vendoring -> Custom tags -> 添加值 “unix” 原因 Go 1.19 引入了unix构建标签。因此&#xff0c;需要添加unix到自定义标签。 参考 https://blog.csdn.net/weixin_43940592/article/det…

VScode代码自动补全提示

VScode代码自动补全提示 打开设置 搜索 Suggest:Snippets Prevent Quick Suggestions &#xff0c;去掉勾选 CtrlShiftP打开setting.json文件&#xff0c;添加以下代码 "editor.suggest.snippetsPreventQuickSuggestions": false,"editor.quickSuggestions…

macOS - DOSbox

文章目录 关于 DOSbox安装使用启动设置启动盘、查看文件 debug 关于 DOSbox 官网&#xff1a; https://www.dosbox.com/文档&#xff1a;https://www.dosbox.com/wiki/Basic_Setup_and_Installation_of_DosBox下载&#xff1a; https://www.dosbox.com/download.php https://s…

Request对象和response对象

一、概念 request对象和response对象是通过Servlet容器&#xff08;如Tomcat&#xff09;自动创建并传递给Servlet的。 Servlet容器负责接收客户端的请求&#xff0c;并将请求信息封装到request对象中&#xff0c;然后将request对象传 递给相应的Servlet进行处理。类似地&…

改进YOLO系列:10.添加NAMAttention注意力机制

添加NAMAttention注意力机制 1. NAMAttention注意力机制论文2. NAMAttention注意力机制原理3. NAMAttention注意力机制的配置3.1common.py配置3.2yolo.py配置3.3yaml文件配置1. NAMAttention注意力机制论文 论文题目:NAM: Normalization-based Attention Module 论文…

软件设计师学习笔记4-寻址方式

目录 1.指令的基本概念 2.寻址方式 2.1寻址方式及其特点 2.2寻址方式图解 3.CISC和RISC 1.指令的基本概念 一条指令就是机器语言的一个语句&#xff0c;它是一组有意义的二进制代码&#xff0c;指令的基本格式为操作码字段地址码字段&#xff0c;其中操作码给出该指令的对…

pgadmin4树节点增删查(二)

十九&#xff0c;表 &#xff08;一&#xff09;查询 请求参数&#xff1a; gid1 sid1 did13799 scid2200pg模板&#xff1a; SELECT rel.oid, rel.relname AS name, rel.reltablespace AS spcoid,rel.relacl AS relacl_str,(CASE WHEN length(spc.spcname::text) > 0 T…

【LeetCode-中等题】238. 除自身以外数组的乘积

题目 题解一&#xff1a;暴力双指针—超时了 双指针暴力查找(需考虑begin end 和begin end i) 的情况 ----- 力扣示例超出时间限制 public int[] productExceptSelf(int[] nums) {int length nums.length;int begin 0;int end length -1;int i 0;int[] number new in…

基于python+pyqt实现opencv银行卡身份证等识别

效果展示 识别结果 查看处理过程 历史记录 完整演示视频&#xff1a; 无法粘贴视频........ 完整代码链接 视频和代码都已上传百度网盘&#xff0c;放在主页置顶文章

MATLAB图论合集(二)计算最小生成树

今天来介绍第二部分&#xff0c;图论中非常重要的知识点——最小生成树。作为数据结构的理论知识&#xff0c;Prim算法和克鲁斯卡尔算法的思想此处博主不详细介绍&#xff0c;建议在阅读本帖前熟练掌握。 对于无向带权图&#xff0c;在MATLAB中可以直接以邻接矩阵的方式创建出来…

研磨设计模式day11观察者模式

目录 场景 代码示例 定义 观察者模式的优缺点 本质 何时选用 简单变型-区别对待观察者 场景 我是一家报社&#xff0c;每当我发布一个新的报纸时&#xff0c;所有订阅我家报社的读者都可以接收到 代码示例 报纸对象 package day11观察者模式;import java.util.Observ…

stm32之DS18B20

DS18B20与stm32之间也是通过单总线进行数据的传输的。单总线协议在DHT11中已经介绍过。虽说这两者外设都是单总线&#xff0c;但时序电路却很不一样&#xff0c;DS18B20是更为麻烦一点的。 DS18B20 举例&#xff08;原码补码反码转换_原码反码补码转换_王小小鸭的博客-CSDN博客…

什么是计算机视觉,计算机视觉的主要任务及应用

目录 1. 什么是计算机视觉 2. 计算机视觉的主要任务及应用 2.1 图像分类 2.1.1 图像分类的主要流程 2.2 目标检测 2.2.1 目标检测的主要流程 2.3 图像分割 2.3.1 图像分割的主要流程 2.4 人脸识别 2.4.1 人脸识别的主要流程 对于我们人类来说&#xff0c;要想认出身边…