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

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

news 2026/3/31 19:10:18

由于本着只学习微信小程序的目的，上面的几篇博文都是跟着黑马程序的课程走的！后面的就讲解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

利用快马AI平台，十分钟为小龙虾openclaw机械爪搭建可运行原型

最近在折腾一个开源机械爪项目——小龙虾openclaw&#xff0c;需要快速验证硬件设计和控制逻辑。传统开发流程从写代码到烧录测试至少半天起步&#xff0c;但这次尝试用InsCode(快马)平台做原型开发&#xff0c;居然十分钟就搞定了可运行版本&#xff01;记录下这个高效的工作流…...

编程新知 2026/3/31 18:58:20

啪」的一声脆响，空气击穿时那道紫色电弧总能让人心头一紧。咱们今天用COMSOL做个好玩的——计算两根针尖电极间的击穿电压，看看电场怎么在金属尖角处「拧麻花

comsol放电电极击穿空气模拟&#xff0c;计算击穿间隙的电压&#xff0c;周围附近的电场老规矩&#xff0c;先画个直径10mm的球头圆柱电极&#xff0c;对面放个尖角曲率半径0.1mm的针电极&#xff0c;间隙留5mm。材料库选「空气」&#xff0c;但要注意击穿模型得用自定义的。物…...

编程新知 2026/3/31 18:56:20

突破工厂建设瓶颈：FactoryBluePrints蓝图库带来的自动化生产革命

突破工厂建设瓶颈&#xff1a;FactoryBluePrints蓝图库带来的自动化生产革命 【免费下载链接】FactoryBluePrints 游戏戴森球计划的**工厂**蓝图仓库 项目地址: https://gitcode.com/GitHub_Trending/fa/FactoryBluePrints FactoryBluePrints是戴森球计划的开源工厂蓝图…...

编程新知 2026/3/31 18:11:46

全能视频下载工具：Video-Downloader让在线视频轻松保存

全能视频下载工具&#xff1a;Video-Downloader让在线视频轻松保存 【免费下载链接】Video-Downloader 下载youku,letv,sohu,tudou,bilibili,acfun,iqiyi等网站分段视频文件&#xff0c;提供mac&win独立App。 项目地址: https://gitcode.com/gh_mirrors/vi/Video-Downloa…...

编程新知 2026/3/31 14:40:06

GitHub协作开发：AnythingtoRealCharacters2511动漫转真人开源项目实践

GitHub协作开发&#xff1a;AnythingtoRealCharacters2511动漫转真人开源项目实践 1. 项目介绍与准备 AnythingtoRealCharacters2511是一个专门将动漫角色转换为真实人像的开源项目&#xff0c;基于先进的AI图像生成技术。这个项目在GitHub上开源&#xff0c;让开发者可以共同…...

编程新知 2026/3/31 13:41:06

探秘书匠策AI：毕业论文创作的“全能助手”大揭秘

在学术探索的征途中&#xff0c;毕业论文如同一座巍峨的山峰&#xff0c;让无数学生既心怀憧憬又倍感压力。从选题迷茫到文献海捞&#xff0c;从结构搭建到内容雕琢&#xff0c;每一步都充满了挑战。但别怕&#xff0c;今天我们就来揭秘一位学术界的“全能助手”——书匠策AI&a…...

编程新知 2026/3/31 13:30:55

【仅限JDK 25 Early Access用户】：隐藏API `LinkerOptions` 强制启用向量化调用的2行代码，实测吞吐提升2.8倍

第一章&#xff1a;Java 25 外部函数接口优化案例Java 25 正式将外部函数与内存 API&#xff08;Foreign Function & Memory API&#xff09;从预览特性转为正式特性&#xff0c;显著提升了 JVM 与本地代码交互的安全性、性能与开发体验。相比早期 JNI 方案&#xff0c;FFM…...

编程新知 2026/3/31 12:41:58

Phi-4-mini-reasoning企业应用探索：智能客服知识推理模块集成方案

Phi-4-mini-reasoning企业应用探索&#xff1a;智能客服知识推理模块集成方案 1. 轻量级推理模型的价值 在当今企业智能化转型浪潮中&#xff0c;轻量级推理模型正成为技术落地的关键。Phi-4-mini-reasoning作为一款专注于高质量推理的开源模型&#xff0c;凭借其128K令牌的超…...

编程新知 2026/3/31 12:01:35

3分钟快速上手AdGuard浏览器扩展：开源广告拦截工具全平台安装指南

3分钟快速上手AdGuard浏览器扩展&#xff1a;开源广告拦截工具全平台安装指南 【免费下载链接】AdguardBrowserExtension AdGuard browser extension 项目地址: https://gitcode.com/gh_mirrors/ad/AdguardBrowserExtension AdGuard浏览器扩展是一款开源、免费的广告拦截…...

编程新知 2026/3/31 7:37:23

s2-proGPU利用率提升方案：批处理合成与异步请求性能压测报告

s2-pro GPU利用率提升方案&#xff1a;批处理合成与异步请求性能压测报告 1. 项目背景与挑战 s2-pro作为Fish Audio开源的专业级语音合成模型镜像&#xff0c;在实际应用中面临GPU利用率不足的问题。通过初步监测发现&#xff1a; 单次请求GPU利用率峰值仅达到35-40%请求间隔…...

编程新知 2026/3/31 6:46:53