【小程序 按钮 表单 】

news2024/11/25 20:29:12

按钮
在这里插入图片描述

代码演示
xxx.wxml

<view class="boss" hover-class="box"
    hover-start-time="2000"
    hover-stay-time="5000"
  >
    	测试文本
    <view hover-stop-propagation="true">子集</view>
    <view>子集2</view>
  </view>
  
  <form bindsubmit="">
  <!-- 自动设置样式大小 -->
  <!-- button行内块元素 -->
  <!-- 
       size="default" 按钮默认值
       size="mini" 按钮超小值
       class 可在wxss文件内 设置样式大小
  -->
    <button>1</button>
    <button size="default" style="background-color: orchid;">2</button>
    <button size="mini" style="background-color: rgb(170, 196, 238);">3</button>
    <!-- type="warn"设置后取消 class="but1"样式 -->
    <button class="but1" type="warn">确定</button>
  </form>
</view>

表单属性:

1.要用form标签包裹
2.bindreset 重置
3.plain 镂空
4.type=“warn” 提示 红色字体
5.type="primary"默认 等
6.size=“mini” 超小按钮
7.disabled=“true” 禁止点击按钮 降低按钮颜色程度
8.type=“number”/type=“safe-password” 输入时 只有数字键盘
9.password=“true” 密码小圆点 保密键
10.checkbox 复选框
11.disabled=“true” 禁用
12.checkbox-group复选框组 操作在函数内
13.radio-group 单选框组 单选要用 嵌套着才可以实现单选

小程序App.json文件

一.点击态:

  1. 设置点击态属性
    hover-class
  2. 点击不会触发点击态,阻止本节点出现父级的点击态;只设置布尔值
    hover-stop-propagation="true"
  3. 离开停留多久样式
    hover-start-time="1000"
  4. 点击后保留样式 延时结束 保留时间(单位毫秒–3000hs = 3s)
    hover-stay-time="3000"

二.导航栏:

  1. 文字样式(只有黑白颜色) “navigationBarTitleText”: “black”,
  2. 字体颜色 “navigationStyle”: “custom”,
  3. 字体样式 “navigationBarTextStyle”:“black”,
  4. 背景颜色 “navigationBarBackgroundColor”: “#000”

三. 跳转选项:tabBar

  1. 定位在底部/头部–top
	"tabBar": {
		"position": "bottom",
		}
  1. | 选中字体颜色
    color
    | 未选中颜色
    selectedColor
	"color": "#000000",
	"selectedColor": "#999",
  1. 背景颜色
	"backgroungColor":"#333",
  1. 边框颜色
	"borderStyle":"red",
  1. 标签栏列表
	"list": [{
	
		--路径(在page文件内必须有该路径)
		      "pagePath": "pages/plags/plags",
		--名称
		      "text": "首页",
		--选中图片
		      "iconPath": "./image/1.png",
		--未选中图片
		      "selectedIconPath": "./image/1.png"
		      
		}]
  1. 自定义标签栏 - - - 开启自定义主键
	"couston":"true"

四.视口

拓展:

  1. 1vm = 375px = 100 x 3.75px
  2. Vw 视口宽度
  3. Vh 视口高度

五. 导航栏

  1. 导航类型: navigationBarTitleText String
  2. 导航栏的文字 navigationBarBackgroundColor HexColor #000000
  3. 导航栏背景颜色,默认为#fff(白色) navigationBarTextStyle String
  4. 导航栏标题颜色,仅支持 black / white 默认为white backgroundColor HexColor #ffffff
  5. 窗口的背景色 backgroundTextStyle String
  6. 下拉 loading 的样式,仅支持 dark / light enablePullDownRefresh Boolean
  7. 是否全局开启下拉刷新 onReachBottomDistance Number 50
  8. 页面上拉触底事件触发时距页面底部距离,单位为px navigationStyle String default 导航栏样式,仅支持 default / custom

六.Video属性

  • 设置弹幕(用插值设置 也可以直接设置)
    danmu-list=“{{danmuList}}”
  • 自动播放
    autoplay=“true”
  • 视频时长
    duration=“20”
  • 开启弹幕
    danmu-btn=“true”
  • 是否显示弹幕
    enable-danmu=“true”
  • 开始时触发 / 开始或继续播放时 触发play事件
    bindplay=“playBtn”
  • 暂停播放时触发 或 播放到结尾时触发
    bindpause=“pauseBtn”

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

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

相关文章

Vulhub——adminer

文章目录 一、CVE-2021-21311&#xff08;SSRF&#xff09;二、CVE-2021-43008&#xff08;远程文件读取&#xff09; 一、CVE-2021-21311&#xff08;SSRF&#xff09; Adminer是一个PHP编写的开源数据库管理工具&#xff0c;支持MySQL、MariaDB、PostgreSQL、SQLite、MS SQL…

lenovo联想小新Pro 16 APH8 2023款(83AR)笔记本电脑原装出厂Windows11系统镜像安装包下载

恢复出厂开箱状态OEM预装win11系统&#xff0c;自带恢复重置初始化还原功能 下载链接&#xff1a;https://pan.baidu.com/s/1n_mPM4ZrLPrmXpCTukuyCQ?pwdmnwj 提取码&#xff1a;mnwj 联想原装系统自带所有驱动、出厂主题壁纸、系统属性联机支持标志、Office办公软件、联想…

网络空间安全数学基础·整除与同余

主要内容&#xff1a; 整除的基本概念&#xff08;掌握&#xff09; 素数&#xff08;掌握&#xff09; 同余的概念&#xff08;掌握&#xff09; 1.1整除 定义&#xff1a;设a&#xff0c;b是任意两个整数&#xff0c;其中b≠0&#xff0c;如果存在一个整数q&#xff0c;使 …

线性表(从数据结构的三要素出发)

文章目录 逻辑结构存储结构顺序存储链式存储单链表双链表循环单链表循环双链表静态链表 数据的操作顺序结构链式结构单链表双链表 逻辑结构 线性表是具有相同数据类型的 n ( n ≥ 0 ) n(n≥0) n(n≥0)个数据元素的有限序列&#xff0c;其中 n n n为表长&#xff0c;当 n 0 n0…

Elasticsearch集群搭建学习

Elasticsearch集群聚合、集群搭建 RestClient查询所有高亮算分控制 数据聚合DSL实现Bucket聚合DSL实现Metrics聚合RestAPI实现聚合 拼音分词器如何使用拼音分词器&#xff1f;如何自定义分词器&#xff1f;拼音分词器注意事项&#xff1f; 自动补全数据同步集群搭建ES集群结构创…

C++—— set、map、multiset、multimap的介绍及使用

目录 关联式容器 关联式容器的特点和使用场景 树形结构与哈希结构 树形结构 哈希结构 键值对 set set的介绍 set的定义方式 set的使用 multiset map map的介绍 map的定义方式 map的使用 multimap 关联式容器 C标准模板库&#xff08;STL&#xff09;中的关联…

vue17:v-bind对css样式的控制增强

代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><styl…

软考之零碎片段记录(三十一)+复习巩固(错题整理,知识点总结,易错题)

1. 奇偶校验 只能检测一位数的错误。但无法纠正错误。若有奇数个数据位出错&#xff0c;可检测。有局限性。 2. 深度与广度优先遍历 参考题【【数据结构自用】1.图深度优先遍历2.找有向图中的强连通分量数目3.给出图的任意两个拓扑序列】https://www.bilibili.com/video/BV…

下雨!大水蚁引发的水文!看比赛咯,曼联VS曼城——早读(逆天打工人爬取热门微信文章解读)

唠唠嗑 水一水 引言Python 代码结尾 引言 今天星期六 大小周 一个等了很久的双休 昨天晚上真的是吓到我了 漫天的小飞虫 我一开始还以为是一两只 没想到那些小飞虫 从阳台不断飞进来 在山卡拉下面租房子 也是太恐怖了 来个特写 他们也就一个晚上的时间 成虫 天气合适 长翅…

Unity-Sprite Atlas+UGUI系统的运行原理

每日一句&#xff1a;别听世俗耳语&#xff0c;看自己的风景就好 目录 SA的原理&#xff1a; SA的优点&#xff1a; SA的缺点&#xff1a; DrawCall是什么&#xff1f; 批处理是什么&#xff1f; 我们先了解一下UGUI系统的运行原理吧&#xff01; 提到图集优化&#xff0…

【面试干货】数据库乐观锁,悲观锁的区别,怎么实现

【面试干货】数据库乐观锁&#xff0c;悲观锁的区别&#xff0c;怎么实现 1、乐观锁&#xff0c;悲观锁的区别2、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 1、乐观锁&#xff0c;悲观锁的区别 悲观锁&#xff08;Pessimistic Lo…

会声会影调速怎么用 会声会影如何调整音频速度

会声会影是一款功能强大的视频编辑软件&#xff0c;可以帮助我们轻松的实现剪辑。 会声会影的操作简单易懂&#xff0c;界面简洁明快。适合家庭使用&#xff0c; 我们使用会声会影可以在家就能将视频剪辑成好莱坞大片。但是在使用的过程中&#xff0c;仍然会遇到一些操作上的问…

mac下安装airflow

背景&#xff1a;因为用的是Mac的M芯片的电脑&#xff0c;安装很多东西都经常报错&#xff0c;最近在研究怎么把大数据集群上的crontab下的任务都配置到一个可视化工具中&#xff0c;发现airflow好像是个不错的选择&#xff0c;然后就研究怎么先安装使用起来&#xff0c;后面再…

「React」useEffect 与 useLayoutEffect 使用与区别

前言 useEffect 与 useLayoutEffect 是两个 Hooks&#xff0c;前者比较常用&#xff0c;后者在一些场景下也会用到&#xff0c;下面说明两者区别和应用场景。 使用 useEffect 和 useLayoutEffect 是React Hooks里用于处理副作用的钩子&#xff08;Hooks&#xff09;&#x…

单机一天轻松300+ 最新微信小程序拼多多+京东全自动掘金项目、

现代互联网经济的发展带来了新型的盈利方式&#xff0c;这种方法通过微信小程序的拼多多和京东进行商品自动巡视&#xff0c;以此给商家带来增加的流量&#xff0c;同时为使用者带来利润。实践这一手段无需复杂操作&#xff0c;用户仅需启动相应程序&#xff0c;商品信息便会被…

自定义一个SpringBoot场景启动器

前言 一个刚刚看完SpringBoot自动装配原理的萌新依据自己的理解写下的文章&#xff0c;如有大神发现错误&#xff0c;敬请斧正&#xff0c;不胜感激。 分析SpringBoot自动配置原理 SpringBoot的启动从被SpringBootApplication修饰的启动类开始,SpringBootApplicaiotn注解中最…

单片机LCD1602显示电子时钟设计

基于52单片机电子时钟的设计 摘要 本次设计的多功能时钟系统采用STC89C52单片机为核心器件&#xff0c;利用其定时器/计数器定时和记数的原理&#xff0c;结合液晶显示电路、时钟芯片DS1302电路、电源电路以及按键电路来设计计时器。将软硬件有机地结合起来&#xff0c;使得系…

十一、Python循环语句「长期更新Python简单入门到适用」

在python中&#xff0c;它的循环语句有 for 与 while 1、while循环 在python 中 while 语句的一般形式&#xff1a; while 判断条件 : 声明 同样需要注意冒号和缩进。另外&#xff0c;在Python中没有 do..while 循环。 以下实例使用了 while 来计算 1 到 50 的总和&#…

Adobe Camera Raw 11 for Mac/win:摄影后期处理的革命性飞跃

在数字摄影的世界里&#xff0c;RAW格式以其未压缩的原始数据特性&#xff0c;为摄影师提供了更大的后期处理空间。而Adobe Camera Raw 11&#xff0c;作为这一领域的翘楚&#xff0c;以其卓越的性能和创新的功能&#xff0c;为摄影师们带来了前所未有的创作体验。 Adobe Came…

全网最全网络基础思维导图合集(38张)

计算机网络基础知识点多且杂&#xff0c;想要系统地学习&#xff0c;思维导图肯定是必不可少的。 今天整理了38张思维导图&#xff0c;帮助你轻松理清思路&#xff0c;快速掌握关键内容。建议你收藏起来慢慢看&#xff0c;在看过之后最好能重新动手画一画&#xff0c;让计算机…