Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to realize the WeChat Mini Programs city selector". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought. Let's study and learn "how to achieve WeChat Mini Programs City Selector"!

City selector region

/ / index.wxml current selection: {{region [0]}}, {{region [1]}}, {{region [2]}} view > picker > / / index.jsdata: {region: ['Guangdong', 'Guangzhou', 'Haizhu District']} multi-column selector multiSelector

/ / City.js

/ / Provincial var provinceList = [{"id": "11", "name": "Beijing", "initial": "B"},...]; var cityList = [{"provinceId": "11", "citys": [{"id": "1", "name": "Changping"},...]}] / / Click the province to get the city list 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 当前选择：{{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 selector time

Current selection: {{time}} view > picker > date selector date

Current selection: {{time}} view > picker > rich-text

Attribute: nodes Type: Array / String Node list / HTML String

The class and style attributes are supported globally, but the id attribute is not supported.

Node type: type = node name signature String is supported partially trusted HTML node attrs attribute Object does not support partially trusted attribute, follow Pascal nomenclature children child node list Array no structure is consistent with nodes

Node type: type = text String supports entities

String type is not recommended for nodes, and performance will be degraded.

The events of all nodes are blocked within the rich-text component.

The attrs property does not support id, but supports class.

The name property is case-insensitive.

If an untrusted HTML node is used, the node and all of its children will be removed.

The img tag only supports web images.

This.setData ({nodes: "html title

", nodes1: [{name:" H2 ", attrs: {style:" color:red ", class:" red "}, children: [{type:" text ", text: 'node list title'}]}], 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: 'multi-layer node unordered list'}],}, {name:" li ", attrs: {style:" color:red ", class:" red "}, children: [{type:" text " Text: 'unordered list of multi-layer nodes 1'}],}]}]})

.appreciate {margin-bottom:16px;} .appreciate .btn _ appreciation {display: block; width: 110px; height: 40px; margin: 40px auto 0f fontlue size: 18px; line-height: 40px; text-align: center; vertical-align: middle; color: # fff; border-radius: 5px; background: # ff8000;} .appreciate .head _ count.show {display: block;} .appreciate. Head _ count {display: none; margin: 30px auto 0f fontmuri size: 14pxscape text align: } .appreciate .head _ count I {color: # ff8000;} .appreciate .head _ count b {color: gray;}. Appreciate_list_wrapper {overflow: hidden; margin: 0 auto; width: 200px;} .appreciate_list.vcenter {text-align: center;} .appreciate_list.vcenter a {display:block;}. Appreciate_list {max-height: 120px; overflow: hidden; margin-right:-6px; line-height: 15px;} .appreciate_list img {position: relative; width: 34px; height: 34px Margin: 0 6px 4px 0; border-radius: 17pxbot maxmax width: 100% importance;} .appreciate .btn _ appreciation_t {background: # dc5d4a;} .appreciate .head _ count_t I {color: # 607fa6;} .appreciate_list_wrapper_t {overflow: hidden; margin: 0 auto; width: 250px;} .appreciate_list_t.vcenter_t {text-align: center;}. Appreciate_list_t.vcenter_t a {display:block;}. Appreciate_list_t {max-height: 120px; overflow: hidden Margin-right:-6px; line-height: 15px;} .appreciate_list_t img {position: relative; width: 30px; height: 30px; margin: 0 6px 4px 0maxmaxwidth: 100% bandwidth } Thank you for your reading. the above is the content of "how to realize WeChat Mini Programs City Selector". After the study of this article, I believe you have a deeper understanding of how WeChat Mini Programs City Selector can be realized. the specific use also needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.