【小程序 按钮 表单 】

按钮

代码演示
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",
		}

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

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

4. 背景颜色

	"backgroungColor":"#333",

5. 边框颜色

	"borderStyle":"red",

6. 标签栏列表

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

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

	"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”