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

In this issue, the editor will bring you an example analysis of WeChat Mini Programs's custom date selector. The article is rich in content and analyzed and described from a professional point of view. I hope you can get something after reading this article.

Date selectors are often encountered in the process of writing projects. There are selectors that need titles and selectors that do not need titles.

Today, I will bring you a custom time selector. Don't say much nonsense, just go to the code.

Step 1: create a picker folder first

Step 2: write layout styles in wxml

{{cancelText}} {{titleText}} {{sureText}} {{isUseKeywordOfShow?itemIn [keyWordsOfShow]: itemIn}}

Step 3: add styles to wxss

/ * picker/picker.wxss * / .full-box {position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 9999; opacity: 0; background:rgba; transition:all .4s ease-in-out 0; pointer-events:none;}. Full-box.cur {opacity:1; pointer-events:auto} .modal {position: absolute Width: 100%; height: 50%; bottom:-50%; left: 0; background: transparent; transition:all .4s ease-in-out 0;} .picker {position: absolute; width: 100%; height: 235px; bottom:- 235px; left: 0; background: # fff; display: flex; flex-direction: column; transition:all .4s ease-in-out 0 } .cur .picker {bottom:0;}. Cur .modal {bottom:50%;}. Picker-line {display: flex; justify-content: center; align-items: center;}. Picker-header {height: 20%; box-sizing: border-box; padding: 020rpx; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid # eeeeee } .picker-header view {height: 100%; display: flex; justify-content: center; align-items: center;}. Picker-header view text {font-size: 36rpx;} .picker-content {flex-grow: 1;} .line1 {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; lines:1}

Step 4: write the properties of the component in js

/ / picker/picker.jsimport {isPlainObject} from'. / tool' Component (attribute list of {/ * component * / properties: {scrollType: {type: String, value: 'normal'// "link": scroll linkage "normal": scroll independent}, listData: {type: Array, value: [] Observer: function (newVal) {if (newVal.length = 0 | | this._compareDate ()) return this._setTempData () const tempArr = [... new Array (newVal.length). Keys ()] .map (() = > 0) this.data.lastValue = this.data.tempValue = tempArr this._setDefault () / / let {defaultPickData} = this.properties / / if (newVal.length = 0) return / this._setDefault (newVal, defaultPickData)}}, defaultPickData: {type: Array, value: [], observer: function (newVal) {if (newVal.length = 0 | | this._compareDate ()) return this._setTempData () this._setDefault ()}, keyWordsOfShow: {type: String Value: 'name'}, isShowPicker: {type: Boolean, value: false, observer: function (newVal) {if (newVal) {this._openPicker ()} else {this._closePicker ()}, titleText: {/ / title copy type: String Value: 'please select the arrival date'}, cancelText: {/ / cancel button copy type: String, value: 'cancel'}, sureText: {/ / OK button copy type: String, value:'OK'},}, / * * initial data of the component * / data: {columnsData: [] Value: [], backData: [], height: 0, isOpen: false, isUseKeywordOfShow: false, scrollEnd: true, / / whether scrolling ends lastValue: [], / / the last selected index of each colum tempValue: [], isFirstOpen: true, onlyKey:', defaultPickDataTemp:', listDataTemp:''} / * component method list * / methods: {tapModal () {this.properties.isShowPicker = false this._closePicker ()}, cancle () {this.triggerEvent ('cancle') this._closePicker ()}, sure () {const {scrollEnd TempValue} = this.data if (! scrollEnd) return const backData = this._getBackDataFromValue (tempValue) this.setData ({backData}) this.triggerEvent ('sure', {choosedData: backData, choosedIndexArr: tempValue}) this._closePicker ()} _ bindChange (e) {const {scrollType} = this.properties const {lastValue} = this.data let val = e.detail.value switch (scrollType) {case 'normal': this.data.tempValue = val.concat () this.data.tempValue = val.concat () break case' link': / / let column_02 = this._getColumnData ( This.properties.listData [val [0]] .children) / / let column_03 = this._getColumnData (this.properties.listData [val [0]] .children [val [1]] .children) Var tempArray = [] if (val.length > 1) {val.slice (0, val.length-1). Reduce ((t, c, I) = > {const v = t [c] .children tempArray.push (this._getColumnData (v)) return v} This.properties.listData)} / / let columnsData = [this.data.columnsData [0], column_02,column_03] Var columnsData = [this.data.columnsData [0],... tempArray] / / set value association var compareIndex = this._getScrollCompareIndex (lastValue Val) if (compareIndex >-1) {let tempI = 1 while (val [compareIndex + tempI]! = undefined) {val [compareIndex + tempI] = 0 tempI++}} val = this._validate (val) this.data.lastValue = val.concat () this.data. TempValue = val.concat () this.setData ({columnsData / / value: val})}} _ validate (val) {const {columnsData} = this.data columnsData.forEach ((v, I) = > {if (columnsdata [I] .length-1

< val[i]) { val[i] = columnsData[i].length - 1 } }) this.setData({ value: val }) return val }, _bindpickend() { this.data.scrollEnd = true }, _bindpickstart() { this.data.scrollEnd = false }, _openPicker() { if (!this.data.isFirstOpen) { if (this.properties.listData.length !== 0) { this._setDefault(this._computedBackData(this.data.backData)) } } this.data.isFirstOpen = false this.setData({ isOpen: true }) }, _closePicker() { this.setData({ isOpen: false }) }, _getColumnData(arr) { return arr.map((v) =>

This._fomateObj (v))}, _ fomateObj (o) {const tempO = {} for (const k in o) {k! = 'children' & & (tempO [k] = o [k])} return tempO}, _ getScrollCompareIndex (arr1, arr2) {let tempIndex =-1 for (let I = 0, len = arr1.length; I)

< len; i++) { if (arr1[i] !== arr2[i]) { tempIndex = i break } } return tempIndex }, // 根据id获取索引 _getIndexByIdOfObject(listData, idArr, key, arr) { if (!Array.isArray(listData)) return for (let i = 0, len = listData.length; i < len; i++) { if (listData[i][key] === idArr[arr.length][key]) { arr.push(i) return this._getIndexByIdOfObject(listData[i].children, idArr, key, arr) } } }, _setDefault(inBackData) { const { scrollType } = this.properties let { listData, defaultPickData } = this.properties const { lastValue } = this.data if (inBackData) { defaultPickData = inBackData } let backData = [] switch (scrollType) { case 'normal': if (isPlainObject(listData[0][0])) { this.setData({ isUseKeywordOfShow: true }) } if (Array.isArray(defaultPickData) && defaultPickData.length >

0) {backData = listData.map ((v, I) = > v [defaultPickData[ I]) this.data.tempValue = defaultPickData this.data.lastValue = defaultPickData} else {backData = listData.map ((v) = > v [0])} this.setData ({columnsData: listData, backData: backData Value: defaultPickData}) break case 'link': / / let column_01 = this._getColumnData (newVal) / / let column_02 = this._getColumnData (newVal [0] .children); / / let column_03 = this._getColumnData (newVal [0] .children [0] .children); / / let columnsData = [column_01,column_02,column_03] Var columnsData = [] / / if the default value if (Array.isArray (defaultPickData) & & defaultPickData.length > 0 & & defaultPickData.every ((v, I) = > isPlainObject (v)) {const key = this.data.onlyKey = Object.keys (defaultPickData [0]) [0] const arr = [] this._getIndexByIdOfObject (listData, defaultPickData, key) Arr) defaultPickData = arr let tempI = 0 do {lastValue.push (defaultPickdata [tempi]) columnsData.push (this._getColumnData (listData)) listData = listData[ defaultPickdata [tempi]] .children tempI++} while (listData) backData = columnsData.map ((v) I) = > v [defaultPickData[ I]]) / / if there is no default value} else {this.data.onlyKey = this.properties.keyWordsOfShow | | 'name' do {lastValue.push (0) columnsData.push (this._getColumnData (listData)) listData = listData [0] .children} while ( ListData) backData = columnsData.map ((v) = > v [0])} this.data.tempValue = defaultPickData this.data.lastValue = defaultPickData this.setData ({isUseKeywordOfShow: true ColumnsData, backData}) setTimeout (() = > {this.setData ({value: defaultPickData})}, 0) break}}, _ computedBackData (backData) {const {scrollType ListData} = this.properties const {onlyKey} = this.data if (scrollType = 'normal') {return backData.map ((v, I) = > listdata [I] .findIndex ((vv, ii) = > this._compareObj (v, vv)} else {const t = backData.map ((v) I) = > {const o = {} o [onlyKey] = v [onlyKey] return o}) return t}, _ compareObj (o1, O2) {const {keyWordsOfShow} = this.properties if (typeof o1! = 'object') {return o1 = = O2} else {return o1 [keyWordsOfShow] = = O2 [keyWordsOfShow]}} _ getBackDataFromValue (val) {let tempArr = [] if (val.length > 0) {tempArr = this.data.columnsData.reduce ((t, v, I) = > {return t.concat (v [valI])}, [])} else {tempArr = this.data.columnsData.map ((v, I) = > v [0])} return tempArr} _ compareDate () {/ / exactly equal returns true const {defaultPickDataTemp, listDataTemp} = this.data const {defaultPickData, listData} = this.properties return defaultPickDataTemp = defaultPickData & & listDataTemp = listData}, _ setTempData () {const {defaultPickData, listData} = this.properties this.data.defaultPickDataTemp = defaultPickData this.data.listDataTemp = listData})

Step 5: create a tool.js file

Function _ typeof (obj) {return Object.prototype.toString.call (obj) .slice (8,-1). ToLowerCase ();} function isString (obj) {/ / whether the string return _ typeof (obj) = = 'string'} function isPlainObject (obj) {return _ typeof (obj) =' object';} module.exports = {isString, isPlainObject}

Step 6: make a reference in the json of the desired page

{"usingComponents": {"picker": ".. /.. / picker/picker"}}

Step 7: write the layout in the wxml of the desired page

Five columns of picker selection data of time: {{picker_11_data}} Select Index: {{picker_11_index}}

Step 8: call our custom selector in the js of the desired page

/ / pages/index/index.jsimport {times} from'. / time.js' Page (initial data of {/ * page * / data: {isShow_11: false, listData_11:times, picker_11_data: [],}, onLoad () {setTimeout () = > {this.setData ({defaultPickData_08: [{code:'110000'}, {code:'110100'}, {code:'110101'}]})} 3000)}, showPicker_11: function () {this.setData ({isShow_11: true,})}, sureCallBack_11 (e) {let data = e.detail console.log ("data", data) This.setData ({isShow_11: false, picker_11_data: JSON.stringify (e.detail.choosedData), picker_11_index:JSON.stringify (e.detail.choosedIndexArr)})}, cancleCallBack_11 () {this.setData ({isShow_11: false})},})

Step 9: create a time.js file

Const times = [{name:'2021 year', id:1, children: [{name:' January', id:11, children: [{name:' 1', id:111, children: [{name:'1', id:1111' Children: [{name:'1 score', id:11111,}, {name:'2 score', id:11112,},]} ]}, {name:' 2', id:112, children: [{name:'1', id:1121, children: [{name:'1', id:11111' }, {name:'2 points', id:11112,},]}, {name:'2', id:1121,} ]}, {name:' 3', id:113, children: [{name:' small', id:1131,}, {name:' big', id:1132} ]}]}, {name:' February', id:12, children: [{name:' 1', id:121, children: [{name:'1', id:1121' Children: [{name:'1 score', id:11111,}, {name:'2 score', id:11112,},]} {name:'2', id:1121,},]}, {name:' 2', id:122, children: [{name:'1', id:1121 Children: [{name:'1 score', id:11111,}, {name:'2 score', id:11112,},]} {name:'2', id:1121,},]}, {name:' 3', id:123, children: [{name:'1', id:1121 Children: [{name:'1 score', id:11111,}, {name:'2 score', id:11112,},]} {name:'2', id:1121,},]}]}, {name:'2022 year', id:1, children: [{name:' January', id:11, children: [{name:' 1' Id:111, children: [{name:'1', id:1111, children: [{name:'1', id:11111,}, {name:'2' Id:11112,},]},]}, {name:' 2', id:112, children: [{name:'1', id:1121 Children: [{name:'1 score', id:11111,}, {name:'2 score', id:11112,},]} {name:'2', id:1121,},]}, {name:' 3', id:113, children: [{name:' small', id:1131,} {name:' big', id:1132},]}}, {name:' February', id:12, children: [{name:' 1', id:121 Children: [{name:'1', id:1121, children: [{name:'1', id:11111,}, {name:'2' Id:11112,},]}, {name:'2', id:1121,},]}, {name:' 2', id:122 Children: [{name:'1', id:1121, children: [{name:'1', id:11111,}, {name:'2' Id:11112,},]}, {name:'2', id:1121,},]}, {name:' 3', id:123 Children: [{name:'1', id:1121, children: [{name:'1', id:11111,}, {name:'2' Id:11112,},]}, {name:'2', id:1121,},]}]},] module.exports = {times,}

After completing the above steps, a custom date selector is complete

The above is the example of WeChat Mini Programs custom date selector shared by Xiaobian. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

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.