城市选择器 region//index.wxml<picker mode="region" bindchange="bindRegionChange" value="{{region}}"> <view class="picker">当前选择:{{region[0]}},{{region[1]}},{{region[2]}} view>picker>//index.jsdata: { region: ['广东省', '广州市', '海珠区']}
多列选择器 multiSelector// City.js // 省份var provinceList = [ { "id": "11", "name": "北京", "initial": "B" }, ...];var cityList = [ {"provinceId": "11","citys": [ { "id": "1", "name": "昌平" }, ...] }];// 点击省份,获取城市列表function getCitysById(id) { let provinceId = provinceList[id].id; var tempObj = []; for (let i = 0; i < cityList.length; i++) {if (cityList[i].provinceId == provinceId) { tempObj = cityList[i].citys; break; } } return tempObj;}module.exports = { provinceList: provinceList, getCitysById: getCitysById}
// Picker.wxml <picker mode="multiSelector" value="{{index}}" bindcolumnchange="bindPickerChange" range="{{province}}" range-key="{{'name'}}"> <view class="picker">当前选择:{{province[0][0].name}}{{province[1][0].name}} view>picker>
// Picker.js // picker.jsvar cityObj = require("../../utils/city")Page({ data: { index: 0 }, onLoad: function (options) {var defaultCitys = cityObj.getCitysById("0")this.setData({ province: [cityObj.provinceList, defaultCitys] }) }, bindPickerChange(e) {if (e.detail.column == 0) { var citys = cityObj.getCitysById(e.detail.value); this.setData({ province: [cityObj.provinceList, citys] }) } }})
时间选择器 time<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> <view class="picker">当前选择: {{time}} view>picker>
日期选择器 date<picker mode="date" value="{{time}}" start="2015-09-01" end="2017-09-01" fields="month" bindchange="bindTimeChange"> <view class="picker">当前选择: {{time}} view>picker>
rich-text属性:nodes 类型:Array / String 结点列表 / HTML String 全局支持class和style属性,不支持id属性。 结点类型:type = node name 标签名 String 是 支持部分受信任的HTML结点 attrs 属性 Object 否 支持部分受信任的属性,遵循Pascal命名法 children 子结点列表 Array 否 结构和nodes一致 结点类型:type = text text 文本 String 是 支持entities nodes 不推荐使用 String 类型,性能会有所下降 rich-text 组件内屏蔽所有结点的事件。 attrs 属性不支持 id ,支持 class 。 name 属性大小写不敏感。 如果使用了不受信任的HTML结点,该结点及其所有子结点将会被移除。 img 标签仅支持网络图片。
<rich-text nodes="{{nodes}}" /><rich-text nodes="{{nodes1}}" /><rich-text nodes="{{nodes2}}" />
this.setData({ nodes: "
html
", nodes1: [{ name: "h2", attrs: { style: "color:red", class: "red" }, children: [{ type: "text", text: '结点列表' }] }], nodes2: [{ name: "ul", attrs: { style: "padding:20px;border:1px solid blue;", class: "red" }, children: [ { name: "li", attrs: { style: "color:red", class: "red" }, children: [{ type: "text", text: '多层结点 无序列表' }], }, { name: "li", attrs: { style: "color:red", class: "red" }, children: [{ type: "text", text: '多层结点 无序列表1' }], }] }] })
|