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

由于本着只学习微信小程序的目的,上面的几篇博文都是跟着黑马程序的课程走的!后面的就讲解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.mzph.cn/news/54821.shtml

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

相关文章

论文阅读及复现——《CT_ICP: Real-time Elastic LiDAR Odometry with Loop Closure》

论文阅读之——《CT_ICP: Real-time Elastic LiDAR Odometry with Loop Closure》带闭环的实时弹性激光雷达里程计 1. 主要贡献2. 相关说明3. 激光里程计3.1 里程计公式构建3.2 局部地图与健壮性 4. 回环检测与后端5. 实验结果5.1 里程计实验结果5.2 回环检测实验结果 6. 总结…

【黑马头条之热点文章kafkaStream】

本笔记内容为黑马头条项目的热点文章-实时计算部分 目录 一、实时流式计算 1、概念 2、应用场景 3、技术方案选型 二、Kafka Stream 1、概述 2、Kafka Streams的关键概念 3、KStream 4、Kafka Stream入门案例编写 5、SpringBoot集成Kafka Stream 三、app端热点文章…

计算机竞赛 基于大数据的股票量化分析与股价预测系统

文章目录 0 前言1 课题背景2 实现效果3 设计原理QTChartsarma模型预测K-means聚类算法算法实现关键问题说明 4 部分核心代码5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于大数据的股票量化分析与股价预测系统 该项目较为新颖…

GMP原理与调度

GMP原理和调度 1.Golang"调度器"的由来1.1单进程时代不需要调度器1.2多进程/线程时代有了调度器需求1.3协程来提高cpu利用率 1.Golang"调度器"的由来 1.1单进程时代不需要调度器 早期的操作系统每个程序就是一个进程&#xff0c;直到一个程序运行完毕&am…

pandas由入门到精通-数据透视表

采集的数据存储后通常会分为多个文件或数据库,如何将这些文件按需拼接,或按键进行连接十分重要。这节将介绍数据索引的复杂操作如分层索引,stack,unstack,seet_index,reset_index等帮助重构数据,数据的拼接如merge,join,concat,combine_first等帮助连接数据,以及数据透视表…

1.7 【MySQL】常用存储引擎

MySQL 支持非常多种存储引擎&#xff0c;我这先列举一些&#xff1a; 存储引擎 描述 ARCHIVE 用于数据存档&#xff08;行被插入后不能再修改&#xff09; BLACKHOLE 丢弃写操作&#xff0c;读操作会返回空内容 CSV 在存储数据时&#xff0c;以逗号分隔各个数据项 FEDE…

微信小程序发布迭代版本后如何提示用户强制更新新版本

在点击小程序发布的时候选择&#xff0c;升级选项 之前用户使用过的再打开小程序页面就会弹出升级弹窗modal

深度学习9:简单理解生成对抗网络原理

目录 生成算法 生成对抗网络&#xff08;GAN&#xff09; “生成”部分 “对抗性”部分 GAN如何运作&#xff1f; 培训GAN的技巧&#xff1f; GAN代码示例 如何改善GAN&#xff1f; 结论 生成算法 您可以将生成算法分组到三个桶中的一个&#xff1a; 鉴于标签&#…

火山引擎 DataLeap:从短视频 APP 实践看如何统一数据指标口径

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 短视频正在成为越来越多人发现世界的窗口&#xff0c;其背后的创作者生态建设是各大短视频 APP 不可忽视的重要组成部分。 为了激励更多优质内容生产&#xff0c;某…

iOS 分别对一张图的局部进行磨砂,拼接起来不能贴合

效果图 需求&#xff0c;由于视图层级的原因&#xff0c;需要对图片分开进行磨砂&#xff0c; 然后组合在一起 如图&#xff0c;上下两部分&#xff0c;上下两个UIImageVIew大小相同&#xff0c;都是和图片同样的大小&#xff0c;只是上面的UIimageVIew 只展示上半部份 &#…

初识【类和对象】

目录 1.面向过程和面向对象初步认识 2.类的引入 3.类的定义 4.类的访问限定符及封装 5.类的作用域 6.类的实例化 7.类的对象大小的计算 8.类成员函数的this指针 1.面向过程和面向对象初步认识 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的…

stm32之9.中断优先级配置

主函数main.c #include <stm32f4xx.h> #include "led.h" #include "key.h"#define PAin(n) (*(volatile uint32_t *)(0x42000000 (GPIOA_BASE0x10-0x40000000)*32 (n)*4)) #define PEin(n) (*(volatile uint32_t *)(0x42000000 (GP…

pytorch里面的nn.AdaptiveAvgPool2d

今天遇到nn.AdaptiveAvgPool2d((None, 1)) AdaptiveAvgPool2d函数详细解释&#xff1a; 2D自适应平均池化&#xff08;2D adaptive average pooling&#xff09;是一种对输入信号进行二维平均池化的操作&#xff0c;输入信号由多个输入平面&#xff08;input planes&#xff0…

为什么学嵌入式还要学单片机和人工智能?

从企业用人需求的角度来看&#xff0c;许多企业在招聘嵌入式工程师时都希望其具备一定的技能要求。其中&#xff0c;熟悉STM32单片机开发、熟悉嵌入式Linux开发以及熟悉实时操作系统开发&#xff0c;如FreeRTOS等&#xff0c;是常见的要求。掌握这些技术点的课程将为学生提供更…

成都国际车展来袭:有颜值有实力 大运新能源两款车型备受关注

今年成都国际车展现场最大看点是什么&#xff1f;诸多实力车企汇聚一堂各显神通&#xff0c;形式各样的新能源车型更是吸晴无数&#xff0c;成为消费者的购车首选。老品牌、新势力的大运新能源独具匠心设计特色展台&#xff0c;旗下两款车型悦虎和远志M1重磅登场。两款车型既有…

【设备树笔记整理6】中断系统中的设备树

1 中断概念的引入与处理流程 1.1 中断处理框图 1.2 中断程序的使用 主函数() while(1) {do_routine_task(); }中断处理函数() {handle_interrupt_task(); }如何调用中断处理函数&#xff1f; 1.3 ARM对异常(中断)的处理过程 &#xff08;1&#xff09;初始化 ① 设置中断…

Apollo自动驾驶:引领未来的智能出行

自动驾驶技术正日益成为当今科技领域的焦点&#xff0c;它代表着未来出行的一大趋势&#xff0c;而Baidu公司推出的Apollo自动驾驶平台则在这一领域中展现出强大的领导地位。本文将深入探讨Apollo自动驾驶技术的关键特点、挑战以及它对未来智能出行的影响。 Apollo自动驾驶平台…

wx:for的使用和事件传参,解构赋值的应用

在页面的.js文件中创建了一个对象&#xff0c; 并且在页面的view中调用了两种不同的方法将对象中的元素显示出来&#xff01; 第2种代码要加强理解&#xff01;&#xff01;&#xff01; 小程序中的wx:if wx:elif wx:else 其实好像c语言中的 if-elif-else 在页面的.j…

一个专业级 AI 聊天浏览器,开源了!

公众号关注 “GitHubDaily” 设为 “星标”&#xff0c;每天带你逛 GitHub&#xff01; 在 AI 模型大爆炸的今天&#xff0c;我们每天都能在技术圈见证无数个大语言模型诞生&#xff0c;其诞生速度之快&#xff0c;着实让人看得目不暇接。 对于热衷于体验、调试、评测各种大模型…

Pytorch-day08-模型进阶训练技巧

PyTorch 模型进阶训练技巧 自定义损失函数 如 cross_entropy L2正则化动态调整学习率 如每十次 *0.1 典型案例&#xff1a;loss上下震荡 1、自定义损失函数 1、PyTorch已经提供了很多常用的损失函数&#xff0c;但是有些非通用的损失函数并未提供&#xff0c;比如&#xf…