【小程序 按钮 表单 】

按钮
在这里插入图片描述

代码演示
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.mzph.cn/diannao/15614.shtml

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

相关文章

相关服务器介绍

服务器是一种高性能的计算机&#xff0c;它被设计用来为其他计算机或终端设备提供服务&#xff0c;如数据处理、文件存储、网络通信等。服务器通常具有强大的计算能力、大容量的存储空间和高效的网络连接能力。 常见的服务器种类及其特点 文件服务器 文件服务器主要负责中央存储…

Echarts图表使用

ECharts是一个用JS实现开源可视化库&#xff0c;它提供了丰富的图表类型和交互能力。使用户可以通过简单的配置生成各种各样的图表。 先安装ECharts图表直接下载echarts.min.js并用<script>标签引入也可以使用源代码版本echarts.js并用<script>标签引入&#xff0…

华为机考入门python3--(29)牛客29-字符串加解密

分类&#xff1a;字符变换 知识点&#xff1a; 字符是字母 char.isalpha() 字符是小写字母 char.islower() 字符是数字 char.isdigit() b变C chr((ord(b) - ord(a) 1) % 26 ord(A)) 题目来自【牛客】 # 加密 def encrypt_string(s):result ""for ch…

【算法】决策单调性优化DP

文章目录 决策单调性四边形不等式决策单调性 形式1法1 分治法2 二分队列例题 P3515Solution 形式2例题 P3195Solution 形式3例题 CF833BSolution 形式4例题Solution 后话 决策单调性 四边形不等式 定义: 对于二元函数 w ( x , y ) w(x,y) w(x,y)&#xff0c;若 ∀ a , b , …

强烈推荐 20.7k Star!企业级商城开源项目强烈推荐!基于DDD领域驱动设计模型,助您快速掌握技术奥秘,实现业务快速增长

更多资源请关注纽扣编程微信公众号 1 项目简介 商城是个从零到一的C端商城项目&#xff0c;包含商城核心业务和基础架构两大模块,推出用户、消息、商品、订单、优惠券、支付、网关、购物车等业务模块&#xff0c;通过商城系统中复杂场景&#xff0c;给出对应解决方案。使用 …

Linux网络编程:HTTP协议

前言&#xff1a; 我们知道OSI模型上层分为应用层、会话层和表示层&#xff0c;我们接下来要讲的是主流的应用层协议HTTP&#xff0c;为什么需要这个协议呢&#xff0c;因为在应用层由于操作系统的不同、开发人员使用的语言类型不同&#xff0c;当我们在传输结构化数据时&…

webpack编译过程

webpack编译过程 初始化 此阶段&#xff0c;webpack会将**CLI参数**、**配置文件**、**默认配置**进行融合&#xff0c;形成一个最终的配置对象。​ 对配置的处理过程是依托一个第三方库yargs完成的 ​ 此阶段相对比较简单&#xff0c;主要是为接下来的编译阶段做必要的准备 ​…

Docker学习(3):镜像使用

当运行容器时&#xff0c;使用的镜像如果在本地中不存在&#xff0c;docker 就会自动从 docker 镜像仓库中下载&#xff0c;默认是从 Docker Hub 公共镜像源下载。 一、列出镜像列表 可以使用 docker images 来列出本地主机上的镜像。 各个选项说明&#xff1a; REPOSITORY&am…

【Linux学习】进程

下面是有关进程的相关介绍&#xff0c;希望对你有所帮助&#xff01; 小海编程心语录-CSDN博客 目录 1. 进程的概念 1.1 进程与程序 1.2 进程号 2. 进程的状态 2.1 fork创建子进程 2.2 父子进程间的文件共享 3. 进程的诞生与终止 3.1 进程的诞生 3.2 进程的终止 1. 进…

使用docker commit创建新镜像

前言 我们知道&#xff0c;从docker-hub上拉取的镜像所创建的容器是最小版本的&#xff0c;比如ubuntu内部是没有vim编辑器的&#xff0c;我们需要自己手动安装&#xff0c;但是当我们安装后假如有人把我们的容器误删了&#xff0c;那么我们再次根据原始镜像创建的容器就没有了…

CCF20230501——重复局面

CCF20230501——重复局面 代码如下&#xff1a; #include<bits/stdc.h> using namespace std; int main() {int n;cin>>n;char a[101][64];int i,j;for(i0;i<n;i){for(j0;j<64;j){cin>>a[i][j];}}int temp0,flag1;for(i0;i<n;i){flag1;for(j0;j<…

MySQL---通用语法及分类

目录 一、SQL通用语法 二、 SQL分类 1.DDL 1.1 DDL数据库操作 1.2 DDL表操作---查询 1.3 DDL表操作---创建​编辑 1.4 DDL表操作---数据类型 1.5 DDL表操作---修改 1.6 DDL表操作---删除 1.7 DDL总结 2. 图形化界面工具DataGrip 2.1 创建 2.2 使用 3. DML 3.1 DML介绍 3.2 DM…

521源码-免费源码下载-最新个人主页、个人引导页、网站导航页、引流页源码

这款源码采用HTML、CSS和JavaScript的组合&#xff0c;为您打造了一个既美观又实用的个人主页。通过简单的记事本工具打开源码文件&#xff0c;您可以轻松进行内容、文字以及样式上的修改&#xff0c;以满足您的个性化需求。 源码文件包含了完整的HTML结构、CSS样式表和JavaSc…

【深度学习实战—7】:基于Pytorch的多标签图像分类-Fashion-Product-Images

✨博客主页&#xff1a;王乐予&#x1f388; ✨年轻人要&#xff1a;Living for the moment&#xff08;活在当下&#xff09;&#xff01;&#x1f4aa; &#x1f3c6;推荐专栏&#xff1a;【图像处理】【千锤百炼Python】【深度学习】【排序算法】 目录 &#x1f63a;一、数据…

[Linux]Crond任务调度以及at任务调度

一.crond任务定时调度 crond是反复检测执行的&#xff0c;一个任务结束后&#xff0c;在所规定的时间之后会再次执行 crontab 指令可以给系统分配定时任务 crontab -e 进入编辑页面&#xff0c;设定任务 crontab -l 查看已有定时任务 crontab -r 删除所有任务 编辑时&#xff…

FreeRTOS 源码概述

FreeRTOS 目录结构 使用 STM32CubeMX 创建的 FreeRTOS 工程中&#xff0c;FreeRTOS 相关的源码如下: 主要涉及2个目录&#xff1a; Core Inc 目录下的 FreeRTOSConfig.h 是配置文件 Src 目录下的 freertos.c 是 STM32CubeMX 创建的默认任务 Middlewares\Third_Party…

mac M3芯片 goland 2022.1 断点调试失败(frames are not available)问题,亲测有效

遇到如上问题&#xff0c;解法 步骤1&#xff1a;下载dlv文件 执行 go install github.com/go-delve/delve/cmd/dlvlatest 然后在 $GOPATH/bin里发现多了一个dlv文件 (找不到gopath? 执行 go env 可以看到) 步骤2&#xff1a;配置dlv 将这个dlv文件移到 /Applications/G…

【前端学习——react坑】useState使用

问题 使用useState 时&#xff0c;例如 const [selectedId, setSelectedId] useState([false,true,false]);这样直接利用&#xff0c;无法引发使用selectedId状态的组件的变化&#xff0c;但是selectedId是修改了的 let tempselectedId;temp[toggledId]selectedId[toggledId…

Cloudflare Worker 部署bingai

Cloudflare Worker 部署 1. 注册 Cloudflare 账号 2. 一键部署 登录账户后, 点击下面链接 https://deploy.workers.cloudflare.com/?urlhttps://github.com/Harry-zklcdc/go-proxy-bingai 点击「Authorize Workers」, 登录 Github 账号授权 Cloudflare 点击「I have a ac…