微信小程序学习笔记（2）

文章目录

  • 1、view
  • 2、scroll-view
  • 3、swiper 和 swiper-item
  • 4、text
  • 5、button
  • 6、image
  • -------------------------------------------------------------
  • 1、< movable-view>
  • 2、cover-view
  • 3、icon
  • 4、text
  • 5、rich-text
  • 6、progress
  • 7、lable
  • 8、form
  • 9、picker
    • 普通选择：
    • 多列选择：
    • 时间选择
    • 日期选择
    • 省市区选择
  • 10、picker-view

1、view

相当于div ，是一个块级元素

2、scroll-view

  • 可滚动的试图区域
  • 常用来实现滚动列表

由于代码高亮的显示,本文中 html 代表 wxml ，wxss 代表 wxss

<!--pages/list/list.wxml-->
<scroll-view class="container1" scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view >

/* pages/list/list.wxss */
.container1 view{
	width: 100px;
	height: 100px;text-align: center;
	line-height: 100px;
}

.container1 view:nth-child(1){
	background-color: aqua;
}
.container1 view:nth-child(2){
	background-color: blueviolet;
}
.container1 view:nth-child(3){
	background-color: chartreuse;
}

.container1{
	display: flex;
	justify-content: space-around;
}
.container1{
	border: 1px solid black;
	width: 100px;
	height: 120px;
}

scroll-x /* 允许横向滚动 */
scroll-x /* 允许纵向滚动 */

3、swiper 和 swiper-item

  • 轮播图容器组件 和 轮播图 item 组件
  • 轮播图是滑动转换的
<swiper class="swiper-container">
	<swiper-item>
		<view class="item">A</view>
	</swiper-item>
	<swiper-item>
		<view class="item">B</view>
	</swiper-item>
	<swiper-item>
		<view class="item">C</view>
	</swiper-item>
</swiper>

.swiper-container{
	height: 150px;
}
.item{
	height: 100%;
	line-height: 150px;
	text-align: center;
}
swiper-item:nth-child(1) .item{
	background-color: brown;
}
swiper-item:nth-child(2) .item{
	background-color: skyblue;
}
swiper-item:nth-child(3) .item{
	background-color: gold;
}

在这里插入图片描述

4、text

添加 selectable 属性即可，是布尔值，默认 false

<view>
    长按选中效果
    <text selectable>123456678</text>
</view>

rich-text：通过nodes属性节点，将THML标签渲染为对应的UI结构

<rich-text nodes="<h1 style='color:red;'>标题</h1>">
</rich-text>

5、button

在这里插入图片描述

<!--  -->
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<!-- 小尺寸  size -->
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<!-- 镂空 plain -->
<button size="mini" plain>普通按钮镂空</button>
<button type="primary" size="mini" plain>主色调按钮镂空</button>
<button type="warn" size="mini" plain>警告按钮镂空</button>

6、image

图片属性

<image src="" mode=""/>

在这里插入图片描述

-------------------------------------------------------------

1、< movable-view>

该组件可以在页面中拖拽滑动，不能单独使用，必须放在 < movable-area > 中

movable-area 属性：
	scale-area: /* 当 movable-view 支持双指缩放的时候，设置此值可将放缩手势生效为整个 movable-area 区域
movable-area 可自定义 宽高 ，默认为10px

movable-view：
	direction： all | vertical | none | horizeontal /* 移动的方向 */
	scale：是否支持双指缩放

<movable-area scale-area>
	<movable-view direction="all" scale inertia>
	</movable-view>
</movable-area>

2、cover-view

可覆盖在原生组件上的视图容器，包括 map 、 video 、canvas 等，

内部只允许嵌套 cover-view 、 cover-image 、button

<map>
	<cover-view>
		<cover-view>123</cover-view>
		<button>tijioa</button>
	</cover-view>
</map>

3、icon

图标组件

<icon type="" size=""  color=""/>

<icon type="warn"/>
<icon type="success"/>
<icon type="success_no_circle"/>
<icon type="info"/>
<icon type="cancel"/>
<icon type="search"/>
<icon type="clean"/>
<icon type="waiting"/>
<icon type="download"/>

对应图标：在这里插入图片描述

4、text

文本组件，除了文本节点以外的其他节点都无法长按选中

ensp 中文空格大小的一半
emsp 中文空格
nbsp 根据字体设置空格大小

text 组件中只支持 text 嵌套

可设置属性：

<text user-select space decode></text> 
<!-- 文本可选 显示连续空格 是否解码（空格解析） -->

5、rich-text

富文本组件

<rich-text nodes="{{node01}}"></rich-text>

Page({
    data:{
        node01:[{
            name:'div',
            attrs:{
                style:'
                	color:red;
                	line-height:60px;
                '
            },
            children:[{
                type:'text',
                text:'hello word'
            }]
        }]
    }
})
/*
	attrs 中也可以写为 class ：'mystyle'，指的是本页面中的名为 mystyle 的 css 属性
	node01 也可写为 html 标签的形式，注意用引号引起来

其中，name 指的是标签名字（支持受信任的HTML节点）

attrs 属性，支持受信任的属性，遵循 Pascal 命名法

children 子节点列表，结构和 nodes 一致

6、progress

进度条

<progress percent="50" active/>
<!--
percent 0~100 百分比
show-info false 在进度条右侧显示百分比
storke-width 进度条宽度
activeColor 已选择的进度条颜色
backgroundColor 未选择的进度条颜色
active false 从左往右的动画
active-mode backwards|forwards 从头播放|从上次结束的位置播放

7、lable

<lable>
	<checkbox value='123' checked>admin
</lable>
 
 和
  <checkbox valu='123' checked  id='app'/>
  <lable for='app'>admin</lable>
    
  效果一样

8、form

三个属性：

report-submit boolean：是否返回 formId

bindsubmit 提交表单时触发 submit 事件，携带的值为 e.detail = { value : { ’ name ’ : ’ admin ’ } , formId : ’ ’ }

bindreset 重置时触发的事件

9、picker

从底部弹起的滚动选择器组件，

目前有，普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认普通选择器

普通选择：

<picker  range="{{info}}" bindchange="select">
	<view>选择的内容为:{{opa}}</view>
</picker>

Page({
    data: {
        info: ['1', '2', '3']
  },
  select: function (res) {
    let i = res.detail.value;
    let value = this.data.info[i];
    this.setData({ opa: value });
  },
})

多列选择：

<picker  mode="multiSelector" range="{{info}}" bindchange="select">
	<view>选择了:{{opa}}</view>
</picker>


Page({
  data: {
    info: [
      ['1', '2', '3'],
      ['a', 'b', 'c']
    ]
  },
  select: function (res) {
    let arrSelect = res.detail.value; //获取选项数组的下标
    let value = this.data.info; //获取原数组
    let arr = new Array(); //新建一个空数组
    for (let j = 0; j < arrSelect.length; j++) {
      let k = arrSelect[j]; // 获取选择了第 j 个数组，第 arrSelect[j] 个位置的值（也就是第 j 个数组中的位置）
      let v = value[j][k];//在原数组中查找第 j 个数组 第 k 个位置的值
      arr.push(v);
    }
    this.setData({
      opa: arr
    });
  },    
})

时间选择

<picker  mode="time"  bindchange="selectTimeHM">
	<view>选择了:{{time}}</view>
</picker>

Page({
    data:{
        time:''
    },
    selectTimeHM:function(e){
        this.setData({time:e.detail.value});
    }
})

日期选择

<picker  mode="date"  bindchange="selectTimeHM">
	<view>选择了:{{time}}</view>
</picker>

Page({
    data:{
        time:''
    },
    selectTimeHM:function(e){
        this.setData({time:e.detail.value});
    }
})

省市区选择

<picker  mode="region"  bindchange="selectTimeHM">
	<view>选择了:{{time}}</view>
</picker>

Page({
    data:{
        time:''
    },
    selectTimeHM:function(e){
        this.setData({time:e.detail.value});
    }
})

10、picker-view

嵌入页面的滚动选择器

<view>
  <view>{{year}}年{{month}}月{{day}}日</view>
  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
    <picker-view-column>
      <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
    </picker-view-column>
  </picker-view>
</view>

const date = new Date()
const years = []
const months = []
const days = []
 
for (let i = 1990; i <= date.getFullYear(); i++) {
  years.push(i)
}
 
for (let i = 1; i <= 12; i++) {
  months.push(i)
}
 
for (let i = 1; i <= 31; i++) {
  days.push(i)
}
 
Page({
  data: {
    years: years,
    year: date.getFullYear(),
    months: months,
    month: 10,
    days: days,
    day: 9,
    value: [9999, 9, 8],
  },
  bindChange: function (e) {
    const val = e.detail.value
    this.setData({
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
      day: this.data.days[val[2]]
    })
  }
})

效果：

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Llama模型家族之Stanford NLP ReFT源代码探索 （一）数据预干预

Llama模型家族之Stanford NLP ReFT源代码探索 （一）数据预干预

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 基于 LlaMA…
阅读更多...
基于JSP的医院远程诊断系统

基于JSP的医院远程诊断系统

开头语&#xff1a; 你好呀&#xff0c;我是计算机学长猫哥&#xff01;如果有相关需求&#xff0c;文末可以找到我的联系方式。 开发语言&#xff1a; Java 数据库&#xff1a; MySQL 技术&#xff1a; JSP Servlet JSPBean 工具&#xff1a; IDEA/Eclipse、Navica…
阅读更多...
前端生成海报图技术选型与问题解决

前端生成海报图技术选型与问题解决

作者&#xff1a;vivo 互联网大前端团队 - Tian Yuhan 本篇文章主要聚焦海报图分享这个形式&#xff0c;探讨纯前端在H5&小程序内&#xff0c;合成海报到下载到本地、分享至社交平台整个流程中可能遇到的问题&#xff0c;以及如何解决。 一、引言 绝大多数的电商平台都会…
阅读更多...
持续监控和优化的简单介绍

持续监控和优化的简单介绍

DevOps 监控提供了有关生产环境状况的全面且最新的信息&#xff0c;以及有关其服务、基础设施和应用程序的详细信息。通过从日志和指标中收集数据&#xff0c;您可以在软件开发生命周期的每个步骤中监控合规性和性能。 监控不仅仅针对生产问题&#xff0c;它涵盖了规划、开发、…
阅读更多...
USB （2）

USB （2）

USB transaction 以2.0的枚举过程为例。 首先是TOKEN TRANSACTION&#xff0c;其次是DATA TRANSACTION&#xff0c;再次是Handshake Transaction。 上面的SETUP TRANSACTION是TOKEN TRANSACTION的一种。另外三种是OUT, IN, SOF。 在每个TRANSACTION中又包含了3个STAGE&#x…
阅读更多...
【学术小白成长之路】02三方演化博弈（基于复制动态方程）期望与复制动态方程

【学术小白成长之路】02三方演化博弈（基于复制动态方程）期望与复制动态方程

从本专栏开始&#xff0c;笔者正式研究演化博弈分析&#xff0c;其中涉及到双方演化博弈分析&#xff0c;三方演化博弈分析&#xff0c;复杂网络博弈分析等等。 先阅读了大量相关的博弈分析的文献&#xff0c;总结了现有的研究常用的研究流程&#xff0c;针对每个流程进行拆解。…
阅读更多...
Responder工具

Responder工具

简介 Responder是一种网络安全工具&#xff0c;用于嗅探和抓取网络流量中的凭证信息&#xff08;如用户名、密码等&#xff09;。它可以在本地网络中创建一个伪造的服务&#xff08;如HTTP、SMB等&#xff09;&#xff0c;并捕获客户端与该服务的通信中的凭证信息。 Responder工…
阅读更多...
PD线与Type C

PD线与Type C

大家的iPhone10以上是否把充电器使用正确啦&#xff0c;这里特指iPhone使用的接口(口子&#xff09;。而通常的pd接口指的是电源传输协议&#xff0c;苹果有快充线或者快充头和线&#xff0c;指的就是这个传输协议。有人用错的地方是&#xff0c;充电线使用错方向了&#xff0c…
阅读更多...
DVB-S系统发射端Matlab仿真及FPGA实现

DVB-S系统发射端Matlab仿真及FPGA实现

DVB标准 Digital Video Broadcasting&#xff08;数字视频广播&#xff09;是一个完整的数字电视解决方案&#xff0c;其中包括DVB-C&#xff08;数字电视有线传输标准&#xff09;&#xff0c; DVB-T&#xff08;数字电视地面传输标准&#xff09;&#xff0c;DVB-S&#xff…
阅读更多...
[CR]厚云填补_综述整理

[CR]厚云填补_综述整理

SAR-to-Optical Image Translation and Cloud Removal Based on Conditional Generative Adversarial Networks: Literature Survey, Taxonomy, Evaluation Indicators, Limits and Future Directions Abstract 由于光学图像的局限性&#xff0c;其波段无法穿透云层&#xff0…
阅读更多...
智能变电站网络报文记录及故障录波分析装置

智能变电站网络报文记录及故障录波分析装置

是基于Intel X86、PowerPC、FPGA等技术的高度集成化的硬件平台&#xff0c;采用了高性能CPU无风扇散热、网络数据采集、高速数据压缩存储加密等多种技术&#xff0c;实现了高性能计算、多端口同步高速数据采集、数据实时分析、大容量数据存储等功能。 ● 在满足工业标准的同时&…
阅读更多...
Dubbo 3.x源码(21)—Dubbo服务引用源码(4)

Dubbo 3.x源码(21)—Dubbo服务引用源码(4)

基于Dubbo 3.1&#xff0c;详细介绍了Dubbo服务的发布与引用的源码。 此前我们学习了createInvokerForRemote方法中的Wrapper有哪些以及作用&#xff0c;接下来我们将会的学习真正的本地、应用级别、接口级别的Protocol的引入逻辑&#xff0c;以及创建Proxy服务接口代理对象的逻…
阅读更多...
整除及求余运算符、数字的提取、顺序结构程序

整除及求余运算符、数字的提取、顺序结构程序

1.运算符 在有余数的除法运算中&#xff0c;如果要知道商和余数分别是多少&#xff0c;可以用/和%这两个运算符号来得到。 (1)/(整除)&#xff0c;当被除数和除数均为整数时&#xff0c;结果也为整型&#xff0c;只取商的整数部分。 如:10/25 10/33 5/10 0 (2)%(求余)&…
阅读更多...
Knife4j 生成 API 文档

Knife4j 生成 API 文档

文章目录 Knife4j 简介使用步骤Knife4j 常用注解的列表案例可能遇到报错 Knife4j 简介 Knife4j 是一个增强的 Swagger 文档生成工具&#xff0c;提供了更加友好的界面和更多功能&#xff0c;使得 API 文档更加美观且易于使用。它是基于 Spring Boot 和 Swagger 进行封装的&…
阅读更多...
5分钟快速带了解fl studio21破解汉化版安装激活指南

5分钟快速带了解fl studio21破解汉化版安装激活指南

随着数字音乐制作的快速发展&#xff0c;越来越多的音乐制作软件涌现出来&#xff0c;而FL Studio无疑是其中的佼佼者。作为一款功能强大、易于上手的音乐制作软件&#xff0c;FL Studio V21中文版在继承了前代版本优秀基因的基础上&#xff0c;进一步提升了用户体验&#xff0…
阅读更多...
Databricks Data Warehouse

Databricks Data Warehouse

Warehouse features 原来的data warehouse痛点&#xff1a; 用例不兼容的支持模型的安全和管理不兼容不相交和重复的数据 ETL workloads Streaming Architecture Data Science and ML
阅读更多...
《软件定义安全》之三：用软件定义的理念做安全

《软件定义安全》之三：用软件定义的理念做安全

第3章 用软件定义的理念做安全 1.不进则退&#xff0c;传统安全回到“石器时代” 1.1 企业业务和IT基础设施的变化 随着企业办公环境变得便利&#xff0c;以及对降低成本的天然需求&#xff0c;企业始终追求IT集成设施的性价比、灵活性、稳定性和开放性。而云计算、移动办公…
阅读更多...
06 Linux 设备驱动模型

06 Linux 设备驱动模型

1、Overview Linux-2.6 引入的新的设备管理机制 - kobject 降低设备多样性带来的 Linux 驱动开发的复杂度，以及设备热拔插处理、电源管理等将硬件设备归纳、分类，然后抽象出一套标准的数据结构和接口驱动的开发，就简化为对内核所规定的数据结构的填充和实现驱动模型是 Linu…
阅读更多...
XUbuntu24.04之ch9344(usb转串口芯片)安装驱动(二百四十五)

XUbuntu24.04之ch9344(usb转串口芯片)安装驱动(二百四十五)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
【C#】开发过程中记录问题

【C#】开发过程中记录问题

1.DateTimePicker控件获取时间 拖动控件，设置属性format为custom格式。例如我想获得20240101这种类型的string类型的数据： string DateTime = DateTimePicker.Value.ToString("yyyyMMdd");2.ComboBox下拉列表控件 默认为DropDown，下拉可修改。 DropDownList为下…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站