【小程序按钮表单】

按钮

代码演示
xxx.wxml

bash 复制代码

<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文件

一.点击态：

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

二．导航栏：

文字样式（只有黑白颜色） "navigationBarTitleText": "black",

字体颜色 "navigationStyle": "custom",

字体样式 "navigationBarTextStyle":"black",

背景颜色 "navigationBarBackgroundColor": "#000"

三. 跳转选项：tabBar

定位在底部/头部--top

bash 复制代码

	"tabBar": {
		"position": "bottom",
		}

| 选中字体颜色
color
| 未选中颜色
selectedColor

bash 复制代码

	"color": "#000000",
	"selectedColor": "#999",

背景颜色

bash 复制代码

	"backgroungColor":"#333",

边框颜色

bash 复制代码

	"borderStyle":"red",

标签栏列表

bash 复制代码

	"list": [{
	
		--路径（在page文件内必须有该路径）
		      "pagePath": "pages/plags/plags",
		--名称
		      "text": "首页",
		--选中图片
		      "iconPath": "./image/1.png",
		--未选中图片
		      "selectedIconPath": "./image/1.png"
		      
		}]

自定义标签栏 - - - 开启自定义主键

bash 复制代码

	"couston":"true"

四．视口

拓展：

1vm = 375px = 100 x 3.75px

Vw 视口宽度

Vh 视口高度

五. 导航栏

导航类型： navigationBarTitleText String

导航栏的文字 navigationBarBackgroundColor HexColor #000000

导航栏背景颜色，默认为#fff（白色） navigationBarTextStyle String

导航栏标题颜色，仅支持 black / white 默认为white backgroundColor HexColor #ffffff

窗口的背景色 backgroundTextStyle String

下拉 loading 的样式，仅支持 dark / light enablePullDownRefresh Boolean

是否全局开启下拉刷新 onReachBottomDistance Number 50

页面上拉触底事件触发时距页面底部距离，单位为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"

【小程序 按钮 表单 】

小程序App.json文件

【小程序按钮表单】