小程序5-页面

最新推荐文章于 2021-02-08 17:24:14 发布

玉离骚

最新推荐文章于 2021-02-08 17:24:14 发布

阅读量164

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_29539827/article/details/101198183

版权

小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

小程序页面标签属性值，汇表记录如下，多背几遍写的时候熟练更好，就不用经常来翻看有什么属性能达成什么效果，某个属性有哪些可取的值。

buttom按钮

属性名	类型	默认值	说明
size	String	default	按钮的大小。值为default(满屏宽)、mini(很小的)
type	String	default	类型，值default(白色背景)、primary(绿色背景)、warn(红色)
plain	Boolean	FALSE	是否显示背景色
disabled	Boolean	FALSE	是否禁用、可点击、按钮变灰
loading	Boolean	FALSE	按钮上是否带 loading 转圈图标
form-type	String		用于组件，点击分别会触发组件的 submit/reset 事件
open-type	String		特殊按钮，值contact(客服)、share(分享)、getUserInfo(获取用户信息)
hover-class	String	button-hover	指定按钮按下去的样式类。当 hover-class="none"时，没有点击态效果
hover-start-time	Number	20	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	70	手指松开后点击态保留时间，单位毫秒
session-from	String		open-type="contact"时有效：用户从该按钮进入会话时，开发者将收到带上本参数的事件推送。本参数可用于区分用户进入客服会话的来源。
bindgetuserinfoHandler	Handler		open-type="getUserInfo"时有效：用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同wx.getUserInfo

input按钮

属性名	类型	默认值	说明
value	String		输入框的初始内容
type	String	“text”	input 的类型，值text文本，number数字，idcard身份证，digit小数
password	Boolean	FALSE	是否是密码类型
placeholder	String		输入框为空时占位符
placeholder-style	String		指定 placeholder 的样式
placeholder-class	String	“input-placeholder”	指定 placeholder 的样式类
disabled	Boolean	FALSE	是否禁用
maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
cursor-spacing	Number	0	指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
auto-focus	Boolean	FALSE	(即将废弃，请直接使用 focus )自动聚焦，拉起键盘
focus	Boolean	FALSE	获取焦点
confirm-type	String	“done”	设置键盘右下角按钮的文字，send为“发送”,search为“搜索”,next为“下一个”,go为“前往”,done为“完成”
confirm-hold	Boolean	FALSE	点击键盘右下角按钮时是否保持键盘不收起
bindinput	EventHandle		当键盘输入时，触发input事件，event.detail = {value: value}，处理函数可以直接 return 一个字符串，将替换输入框的内容。
bindfocus	EventHandle		输入框聚焦时触发，event.detail = {value: value}
bindblur	EventHandle		输入框失去焦点时触发，event.detail = {value: value}
bindconfirm	EventHandle		点击完成按钮时触发，event.detail = {value: value}

form表单

属性名	类型	说明
report-submit	Boolean	是否返回formId用于发送模板消息
bindsubmit	EventHandle	携带form中的数据触发submit事件，event.detail = { value : {“name”:“value”} , formId:"" }
bindreset	EventHandle	表单重置时会触发reset事件

下拉选择picker

属性名	类型	说明
mode	String	选择器类型，selector普通，multiSelector多列，time时间，date日期，region地区
range	Array / Object Array	mode为 selector 或 multiSelector 时，range 有效
range-key	String	当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	Number	value 的值表示表示选择了 range 中的第几个（下标从 0 开始）。
bindchange	EventHandle	value 改变时触发 change 事件，event.detail = {value: value}
disabled	Boolean	是否可选
start	String	表示有效时间范围的开始，字符串格式为"hh:mm"
end	String	表示有效时间范围的结束，字符串格式为"hh:mm"
fields	String	有效值 year,month,day，表示选择器的粒度

菜单navigator

属性名	类型	默认值	说明
target	String	self	在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram
url	String		应用内的跳转链接
open-type	String	navigate	跳转方式，值navigate，redirect，switchTab，reLaunch，navigateBack，exit
delta	Number		当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数
app-id	String		当target="miniProgram"时有效，要打开的小程序 appId
path	String		当target="miniProgram"时有效，打开的页面路径，如果为空则打开首页
extra-data	Object		当target="miniProgram"时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。
version	version	release	当target="miniProgram"时有效，要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是正式版，则打开的小程序必定是正式版。
hover-class	String	navigator-hover	指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	600	手指松开后点击态保留时间，单位毫秒
bindsuccess	String		当target="miniProgram"时有效，跳转小程序成功
bindfail	String		当target="miniProgram"时有效，跳转小程序失败
bindcomplete	String		当target="miniProgram"时有效，跳转小程序完成

为了体验上述属性值的效果，也测试了一些内容。效果图
在这里插入图片描述
代码记录如下
component1.wxss

/* pages/component1/component1.wxss */
/** 修改button默认的点击态样式类**/
.button-hover {
  background-color: green;
}
/** 添加自定义button点击态样式类**/
.other-button-hover {
  background-color: blue;
}


.label-1, .label-2{
    margin-bottom: 15px;
}
.label-1__text, .label-2__text {
    display: inline-block;
    vertical-align: middle;
}

.label-1__icon {
    position: relative;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    background: #fcfff4;
}

.label-1__icon-checked {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    background: #1aad19;
}


.label-2__icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 18px;
    height: 18px;
    background: #fcfff4;
    border-radius: 50px;
}

.label-2__icon-checked {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 12px;
    height: 12px;
    background: #1aad19;
    border-radius: 50%;
}

.label-4_text{
    text-align: center;
    margin-top: 15px;
}

component1.wxhl

<view class="btn-area">
  <view class="body-view">
    <text>{{text}}</text>
    <label><button bindtap="addLine">添加一行</button></label>
    <label><button bindtap="removeLine">删除一行</button></label> 
  </view>
</view>


<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>


<text>\n</text>
<view class="bold">按钮的属性</view>
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover">这是一个小按钮</button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="primary">大按钮</button>
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="warn">警告按钮是红色的</button>
<button size="mini" bindtap="setDisabled">点击按钮变灰</button>
<button size="mini" bindtap="setPlain">点击去掉背景色,留下边框色</button>
<button size="mini" open-type="contact">联系客服</button>
<button size="mini" open-type="share">分享给好友</button>


<text>\n\n</text>
<view class="bold">勾选，单选复选写法一样，只需checkbox和radio两词互换即可</view>
<checkbox-group bindchange="checkboxChange">
    <label class="checkbox" wx:for-items="{{items}}">
        <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
    </label>
    <label class="checkbox">
        <checkbox color="red" value="xhs" checked="{{true}}"/>西红柿
    </label>
    <label class="checkbox">
        <checkbox disabled="true" value="hlg" checked="{{true}}"/>火龙果
    </label>
</checkbox-group>

<text>\n</text>
<view class="bold">表单提交</view>
<!-- 点击提交或者重置时，触发下面两个函数 -->
<form bindsubmit="formSubmit" bindreset="formReset">
    <view>
        <view>开关类型</view>
        <switch name="switch"/>
    </view>
    <view>
        <view>进度条类型</view>
        <slider name="slider" show-value></slider>
    </view>

    <view>
        <view>输入框类型</view>
        <input name="input" placeholder="请输入" />
    </view>
    <view>
        <view>单选类型</view>
        <radio-group name="radio-group">
            <label><radio value="radio1"/>单选1</label>
            <label><radio value="radio2"/>单选2</label>
        </radio-group>
    </view>
    <view>
        <view>多选蕾西</view>
        <checkbox-group name="checkbox">
            <label><checkbox value="checkbox1"/>多选1</label>
            <label><checkbox value="checkbox2"/>多选2</label>
        </checkbox-group>
    </view>
    <view>
        <button type="warn" formType="reset">重置</button>
        <button type="primary" formType="submit">提交</button>        
    </view>
</form>

<text>\n</text>
<view class="bold">输入框属性</view>
<view class="section">
    <input placeholder="这是一个可以自动聚焦的input" auto-focus/>
</view>
<view class="section">
    <input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
    <view class="btn-area">
        <button bindtap="bindButtonTap">使得输入框获取焦点</button>
    </view>
</view>
<view class="section">
    <input  maxlength="10" placeholder="最大输入长度10" />
</view>
<view class="section">
    <view class="section__title">你输入的是：{{inputValue}}</view>
    <input  bindinput="bindKeyInput" placeholder="输入同步到view中"/>
</view>
<view class="section">
    <input  bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
</view>
<view class="section">
    密码输入框：<input password type="number" />
</view>
<view class="section">
   密码输入框： <input password type="text" />
</view>
<view class="section">
    <input type="digit" placeholder="带小数点的数字键盘"/>
</view>
<view class="section">
    <input type="idcard" placeholder="身份证输入键盘" />
</view>
<view class="section">
    <input placeholder-style="color:red" placeholder="占位符字体是红色的" />
</view>

<text>\n</text>
<view class="bold">label用法</view>
<view class="section section_gap">
<view class="section__title">表单组件在label内</view>
<checkbox-group class="group" bindchange="checkboxChange">
    <view class="label-1" wx:for-items="{{checkboxItems}}">
        <label>
            <checkbox hidden value="{{item.name}}" checked="{{item.checked}}"></checkbox>
            <view class="label-1__icon">
                <view class="label-1__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
            </view>
            <text class="label-1__text">{{item.value}}</text>
        </label>
    </view>
</checkbox-group>
</view>

<view class="section section_gap">
<view class="section__title">label用for标识表单组件</view>
<radio-group class="group" bindchange="radioChange">
    <view class="label-2" wx:for-items="{{radioItems}}">
        <radio id="{{item.name}}" hidden value="{{item.name}}" checked="{{item.checked}}"></radio>
        <view class="label-2__icon">
            <view class="label-2__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
        </view>
        <label class="label-2__text" for="{{item.name}}"><text>{{item.name}}</text></label>
    </view>
</radio-group>
</view>


<text>\n</text>
<view class="bold">下拉选择</view>
<view>picker支持五种选择器，通过mode来区分，分别是普通选择器(默认)，多列选择器，时间选择器，日期选择器，省市区选择器。</view>
<view class="section">
    <view class="section__title">普通选择器</view>
    <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
        <view class="picker">
            当前选择: {{array[index]}}
        </view>
    </picker>
</view>

<view class="section">
    <view class="section__title">时间选择器</view>
    <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
        <view class="picker">
            当前选择: {{time}}
        </view>
    </picker>
</view>

<view class="section">
    <view class="section__title">日期选择器</view>
    <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
        <view class="picker">
            当前选择: {{date}}
        </view>
    </picker>
</view>
<view class="section">
    <view class="section__title">省市区选择器</view>
    <picker mode="region" bindchange="bindRegionChange" value="{{region}}">
      <view class="picker">
        当前选择: {{region[0]}},{{region[1]}},{{region[2]}}
      </view>
    </picker>
</view>

component1.js

var initLine = '初始行'; 
var extraLine = []; // 用于存储新增的行

// pages/component1/component1.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    text: initLine,

    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: '这里是nodes的富文本填充到页面!'
      }]
    }],

    /** 按钮属性 */
    defaultSize: 'mini',
    primarySize: 'default',
    warnSize: 'default',
    disabled: false,
    plain: false,
    loading: false,

    /** 勾选 */
    items: [
      { name: 'xg', value: '西瓜' },
      { name: 'pg', value: '苹果', checked: 'true' }, // 默认选中项
      { name: 'lz', value: '梨子' },
      { name: 'jz', value: '橘子' },
      { name: 'hg', value: '黄瓜' },
      { name: 'tz', value: '桃子' },
    ],

    /** 输入框 */
    focus: false,
    inputValue: "",

    /** label */
    checkboxItems: [
      { name: 'xg', value: '西瓜' },
      { name: 'pg', value: '苹果', checked: 'true' }, // 默认选中项
      { name: 'lz', value: '梨子' },
      { name: 'jz', value: '橘子', checked: 'true'},
      { name: 'hg', value: '黄瓜' },
      { name: 'tz', value: '桃子' },
    ],
    radioItems: [
      { name: 'xg', value: '西瓜' },
      { name: 'pg', value: '苹果', checked: 'true' }, // 默认选中项
      { name: 'lz', value: '梨子' },
      { name: 'jz', value: '橘子' },
      { name: 'hg', value: '黄瓜' },
      { name: 'tz', value: '桃子' },
    ],
    hidden: false,

    /** 下拉选择 */
    array: ['西瓜', '苹果', '梨子', '橘子'],   
    index: 0,    
    date: '2019-08-01',
    time: '10:00',
    region: ['广东省', '深圳市', '罗湖区'],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  addLine: function (e) {
    extraLine.push('这是新增的行')
    this.setData({
      text: initLine + '\n' + extraLine.join('\n')
    })
  },
  removeLine: function (e) {
    if (extraLine.length > 0) {
      extraLine.pop()
      this.setData({
        text: initLine + '\n' + extraLine.join('\n')
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '你新增的行已经全部删除',
        showCancel:false
      })
    
    }
  },

  setDisabled: function (e) {
    this.setData({
      disabled: !this.data.disabled
    })
  },
  setPlain: function (e) {
    this.setData({
      plain: !this.data.plain
    })
  },
  setLoading: function (e) {
    this.setData({
      loading: !this.data.loading
    })
  },

  checkboxChange: function (e) {
    console.log('您已重新勾选了：', e.detail.value) // 已勾选的值获取
    
  },

  formSubmit: function (e) {
    console.log('form提交的数据是：', e.detail.value)
  },
  formReset: function () {
    console.log('form已经被重置了。。。')
  },
  bindButtonTap: function () {
    this.setData({
      focus: true
    })
  },
  bindKeyInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },
  bindReplaceInput: function (e) {
    var value = e.detail.value;
    var pos = e.detail.cursor;
    if (pos != -1) {
      //光标在中间
      var left = e.detail.value.slice(0, pos);
      //计算光标的位置
      pos = left.replace(/11/g, '2').length;
    }

    //直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
    return {
      value: value.replace(/11/g, '2'),
      cursor: pos
    }

    //或者直接返回字符串,光标在最后边
    //return value.replace(/11/g,'2'),
  },

  checkboxChange: function (e) {
    var checked = e.detail.value
    var changed = {}
    for (var i = 0; i < this.data.checkboxItems.length; i++) {
      if (checked.indexOf(this.data.checkboxItems[i].name) !== -1) {
        changed['checkboxItems[' + i + '].checked'] = true
      } else {
        changed['checkboxItems[' + i + '].checked'] = false
      }
    }
    this.setData(changed)
  },
  radioChange: function (e) {
    var checked = e.detail.value
    var changed = {}
    for (var i = 0; i < this.data.radioItems.length; i++) {
      if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
        changed['radioItems[' + i + '].checked'] = true
      } else {
        changed['radioItems[' + i + '].checked'] = false
      }
    }
    this.setData(changed)
  },

  bindPickerChange: function (e) {
    console.log('选择改变，新值是：', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },  
  bindDateChange: function (e) {
    console.log('选择改变，新值是：', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
  bindTimeChange: function (e) {
    console.log('选择改变，新值是：', e.detail.value)
    this.setData({
      time: e.detail.value
    })
  },
  bindRegionChange: function (e) {
    console.log('选择改变，新值是：', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  }
  })

玉离骚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小程序5-页面

小程序页面标签属性值，汇表记录如下，多背几遍写的时候熟练更好，就不用经常来翻看有什么属性能达成什么效果，某个属性有哪些可取的值。buttom按钮属性名类型默认值说明sizeStringdefault按钮的大小。值为default(满屏宽)、mini(很小的)typeStringdefault类型，值default(白色背景)、primary(绿色背景...
复制链接

扫一扫