微信小程序(一)

 WebView app.是全局配置,app.json是全局配置文件,在页面的.json配置文件中的配置会覆盖我们全局的配置

快捷键: .box 敲回车 ----- <view class="box"></view> 

                .row*8 敲回车:

         .row{$}*8 敲回车

案例1:

.wxss:

.box{color: red;border:3px solid rgb(196, 240, 196);
}

.wxml:

    <view class = "box">跟我一起学小程序</view>

案例2:

px和rpx的差异:

px单位是固定大小不会随着屏幕的改变而改变,rpx是响应式布局:

案例3:

 .wxml:         hover-stop-propagation:子元素阻止父元素冒泡

<view class="box" hover-class="boxhover" hover-start-time="0" hover-stay-time="200">王婆卖瓜 <view class = "inner" hover-class="innerhover" hover-stop-propagation = "true">老王卖鱼</view>
</view>
<view>11111</view>
<view>22222</view>
<text user-select>33333</text>
<text>44444</text>
<text user-select >55555</text>
<view>-----------</view>
<text space="ensp" >6 6  6  6   6</text>
<view>-----------</view>
<text space="emsp" >6 6  6  6   6</text>
<view>-----------</view>
<text space="nbsp" >6 6  6  6   6</text>
<view>-----------</view>
<text decode >&lt; 77777</text><view>-----------</view>
<text  >&lt; 77777</text>
<view><icon type ="warn" size="100" color="pink"></icon><icon type ="waiting" size="50"></icon>
</view>
<view><progress percent= "30" show-info border-radius="100" stroke-width="10"></progress>
</view>

.wxss:

.box{width:200px;height:200px;background: red;
}.boxhover{background: palegreen;
}.box .inner{width:80px;height:80px;background: palevioletred;}
.inner.innerhover{background: seashell;
}
 案例4:scroll-view

没有之前:

竖向滚动:

 .wxml:   

<scroll-view class = "myScroll" scroll-y><view class="row">1</view><view class="row">2</view><view class="row">3</view><view class="row">4</view><view class="row">5</view><view class="row">6</view><view class="row">7</view><view class="row">8</view>
</scroll-view> <!-- scroll-view:可滚动,scroll-y:竖向滚动 --> 

.wxss:

.myScroll{width: 100%; /*沾满整个屏幕 */height:500rpx;background: #eeeeee;
}.myScroll .row{width: 220rpx;height:220rpx; background: palegreen;margin-bottom: 10rpx; /* 每个容器底部间距10rpx */
}  
 横向滚动:

         强制一行然后实现滚动效果:

  /*1、把子容器排成一行, 如果只有inline的话,width、height就不起作用了 */

          display: inline-block; 

 /*2、强制让子元素挤在一行*/

         white-space: nowrap;

wxml:

<scroll-view class = "myScroll" scroll-x><view class="row">1</view><view class="row">2</view><view class="row">3</view><view class="row">4</view><view class="row">5</view><view class="row">6</view><view class="row">7</view><view class="row">8</view>
</scroll-view> <!-- scroll-view:可滚动,scroll-y:竖向滚动 --> 

 wxss:

.myScroll{width: 100%; /*沾满整个屏幕 */height:500rpx;background: #eeeeee;/*2、强制让子元素挤在一行*/white-space: nowrap;
}.myScroll .row{width: 220rpx;height:220rpx; background: palegreen;/*1、把子容器排成一行, 如果只有inline的话,width、height就不起作用了 */display: inline-block; margin-right: 10rpx;  }  /* 每个元素都有10间隔 最后一个元素不需要有间隔:*/
.myScroll .row:last-child{margin-right: 0;
}
案例5:movable-area自由移动 

        拖动图形验证功能可以使用这个实现

<movable-area>、 <movable-view>必须联合使用, <movable-view>才是可移动区域

  • movable-area 必须设置width和height属性,不设置默认为10px**
  • 当movable-view小于movable-area时,movable-view的移动范围是在movable-area内;
  • 当movable-view大于movable-area时,movable-view的移动范围必须包含movable-area
<movable-view> 属性类型默认值必填说明
directionstringnone

movable-view的移动方向,

属性值有all、vertical、horizontal、none

inertiabooleanfalsemovable-view是否带有惯性
out-of-boundsbooleanfalse超过可移动区域后,movable-view是否还可以移动

 .wxml:

<movable-area style="width: 400rpx;height:400rpx;background:#ccc; overflow: hidden;"><!-- out-of-bounds:可以移出、overflow: hidden移出后隐藏移出部分 --> <movable-view direction="all" inertia x="20rpx" y="20rpx" out-of-boundsstyle="width: 150rpx;height: 150rpx;background: green;"><view>hello</view></movable-view>
</movable-area>

案例6:navigator页面链接导航

<navigator url = "/pages/index/index" hover-class="hoverNav">这是跳转到index页面</navigator><navigator url = "/pages/index/index" class="out" hover-class="hoverNav"><image src="/static/pic2.png" mode="aspectFit" class="image"></image>
</navigator>

.out .image{width: 200rpx;height: 200rpx;
}.hoverNav{color: aquamarine;background:rgb(248, 52, 101);
}

相对路径 退出两层 ../../

/代表根目录

案例7:app.js

app.js是全局配置文件:

用的比较多的是globalData全局变量:

看控制台:

 如何修改全局变量的值呢:

 案例8:data差值表达式中:

                两个花括号!!!!

<view>我的名字是:{{myName}}
</view>

设置一个定时器,在页面加载完成2s后修改值 

这个+号是连接符

true和false必须放在差值表达式中

if else两个盒子要放在一起,如果你中间加了一些别的字符,就会报错

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

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

相关文章

自然语言处理(NLP)—— 语义关系提取

语义关系是指名词或名词短语之间的联系。这些关系可以是表面形式&#xff08;名词性实体&#xff09;之间的联系&#xff0c;也可以是知识工程中概念之间的联系。在自然语言处理&#xff08;NLP&#xff09;和文本挖掘领域&#xff0c;识别和理解这些语义关系对于信息提取、知识…

linux系统docker容器编写dockerfile文件

Docker file介绍 Docker file官网构建三步骤docker file构建过程docker file内容基础知识docker执行dockerfile的大致流程 dockerfile常用保留字指令RUNEXPOSEWORKDIRUSERMAINTAINERENVADDCOPYVOLUMEFROMCMDENTRYPOINT总结 Docker file docker file是用来构建docker镜像的文本文…

openstack rocky版手动搭建

实验环境 系统&#xff1a;CentOS-7-x86_64-DVD-1804 实验环境&#xff1a;vmware 网络&#xff1a;桥接模式----1块网卡---静态IP hostnameip功能controller192.168.20.205管理节点compute192.168.20.215计算节点 &#xff08;一&#xff09;环境设置&#xff0c;所有节点…

力扣每日一题 在受污染的二叉树中查找元素 哈希 DFS 二进制

Problem: 1261. 在受污染的二叉树中查找元素 思路 &#x1f468;‍&#x1f3eb; 灵神题解 &#x1f496; 二进制 时间复杂度&#xff1a;初始化为 O ( 1 ) O(1) O(1)&#xff1b;find 为 O ( m i n ( h , l o g 2 t a r g e t ) O(min(h,log_2target) O(min(h,log2​targ…

数字孪生与智慧城市:实现城市治理现代化的新路径

随着信息技术的迅猛发展&#xff0c;智慧城市已成为城市发展的必然趋势。数字孪生技术作为智慧城市建设的重要支撑&#xff0c;以其独特的优势为城市治理现代化提供了新的路径。本文将探讨数字孪生技术在智慧城市中的应用&#xff0c;以及如何实现城市治理的现代化。 一、数字…

Python 导入Excel三维坐标数据 生成三维曲面地形图(体) 5-3、线条平滑曲面且可通过面观察柱体变化(三)

环境和包: 环境 python:python-3.12.0-amd64包: matplotlib 3.8.2 pandas 2.1.4 openpyxl 3.1.2 scipy 1.12.0 代码: import pandas as pd import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D from scipy.interpolate import griddata fro…

leetcode2864--最大二进制奇数

1. 题意 给二进制串&#xff0c;求重新排列后的最大串。 2. 题解 统计1个数&#xff0c;将 C n t − 1 Cnt-1 Cnt−1个1放开头&#xff0c;其他除第0位都是0。 class Solution { public:string maximumOddBinaryNumber(string s) {int cnt count(s.begin(), s.end(), 1);r…

C#,红黑树(Red-Black Tree)的构造,插入、删除及修复、查找的算法与源代码

1 红黑树(Red-Black Tree) 如果二叉搜索树满足以下红黑属性,则它是红黑树: 每个节点不是红色就是黑色。根是黑色的。每片叶子(无)都是黑色的。如果一个节点是红色的,那么它的两个子节点都是黑色的。对于每个节点,从节点到后代叶的所有路径都包含相同数量的黑色节点。红…

HAProxy适配openGauss使用指导书

一、HAProxy 简介 HAProxy 是一个开源的项目&#xff0c;其代码托管在 Github 上&#xff0c;代码链接如下&#xff1a;HAProxy 代码链接。HAProxy 提供高可用性、负载均衡以及基于 TCP 和 HTTP 应用的代理&#xff0c;支持虚拟主机&#xff0c;它是免费、快速并且可靠的一种解…

机密计算:为云数据提供强大的安全性

在人工智能应用中&#xff0c;数据隐私是一个重要关注问题。在AI模型训练过程中&#xff0c;特别是在联邦学习等分布式学习场景中&#xff0c;云数据可能分布在不同的地方&#xff0c;包括用户设备、边缘服务器和云服务。机密计算是为人工智能开发中的安全和隐私保护提供基础的…

[Vue] 自定义命令

Vue 自定义命令 官方的vue命令包括&#xff1a;v-html v-if v-else v-show v-for等等为了提高效率&#xff0c;减少重复项编写&#xff0c;vue支持自定义命令&#xff0c;可以封装一些DOM操作&#xff0c;扩展额外的功能 语法 注册 全局注册 //在main.js中 Vue.directive(…

使用endnote插入引用文献导致word英文和数字变成符号的解决方案

使用endnote插入引用文献导致word英文和数字变成符号的解决方案 如图使用endnote插入引用文献导致word英文和数字变成符号字体Wingdings Wingdings 是一个符号字体系列&#xff0c;它将许多字母渲染成各式各样的符号&#xff0c;用途十分广泛。 **解决方法&#xff1a;**直接通…

Linux基础学习:常用命令

目录结构及其常用命令 处理目录的常用命令&#xff1a; ls &#xff1a;列出目录及文件名cd&#xff1a;切换目录pwd&#xff1a;显示目前的目录mkdir&#xff1a;创建一个新的目录rmdir&#xff1a;删除一个空的目录cp&#xff1a;复制文件或目录rm&#xff1a;删除文件或目录…

uni-app网络请求封装及发送

在看本篇文章之前&#xff0c;请先至少学会独立完成vue2项目 首先配置request.js const url_all {DEV: http://localhost:8888, // 开发// 生产 PRO: http://111.111.111.111:8080, }let BASEURL url_all[DEV] // 调整当前环境/** 全局请求封装* param path 请求路径* pa…

ROS2 Python导入三方库及自定义python程序

ROS2 Python导入三方库及自定义python程序 文章目录 前言正文导入三方库文件导入自定义python程序 前言 本文主要讲解ROS2建立pyhon包时如何导入三方库文件&#xff08;.so&#xff09;&#xff0c;及自定义的python程序。 正文 导入三方库文件 此处以Jaka驱动为例&#xf…

【3GPP】【核心网】【5G】NG接口介绍(超详细)

目录 1. NG接口定义 2. 接口原则和功能 3. NG 接口控制面 5. NG接口主要信令流程 6. NG SETUP过程 1. NG接口定义 NG接口指无线接入网与5G核心网之间的接口。在5G SA网络中&#xff0c;gNB之间通过Xn接口进行连接,gNB与5GC之间通过NG接口进行连接。NG接口分为NG-C接口和NG…

Python控制摄像头并获取数据文件

一、引言 摄像头作为计算机视觉领域的核心设备之一&#xff0c;广泛应用于视频监控、图像采集和数据处理等领域。通过Python编程语言&#xff0c;我们可以实现对摄像头的精确控制&#xff0c;包括摄像头的开启、关闭、参数设置以及数据获取等功能。本文将指导读者完成这些操作…

CVE-2023-38836 BoidCMSv.2.0.0 后台文件上传漏洞

漏洞简介 BoidCMS是一个免费的开源平面文件 CMS&#xff0c;用于构建简单的网站和博客&#xff0c;使用 PHP 开发并使用 JSON 作为数据库。它的安装无需配置或安装任何关系数据库&#xff08;如 MySQL&#xff09;。您只需要一个支持PHP 的Web服务器。在 BoidCMS v.2.0.0 中存…

【LLM知识】笔记

为什么现在的LLM以decoder-only为主 为什么现在的LLM都是Decoder only的架构&#xff1f; 回答一 回答二 encoder-decoder 常用于处理需要对输入和输出建立精确的映射关系的任务&#xff08;机器翻译、文本摘要等&#xff09;&#xff0c;更具有专业性优势 输入的语义理解会…

c#简易学生管理系统

https://pan.baidu.com/s/1kCPvWg8P5hvlf26nGf2vxg?pwdya45 ya45