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

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

news 2026/2/10 5:28: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;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2026/1/28 10:58:50

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2026/2/9 6:48:42

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2026/2/10 5:21:30

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2026/1/24 14:31:01

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/23 3:55:49

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/11/22 7:38:58

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

编程新知 2026/1/28 8:34:48

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

编程新知 2026/1/25 10:12:06