网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
二、前端页面制作二级选择框
首先,我们先在页面画出二级选择框:
wxml:
<view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="inputbox flex">
<text class="picker-text">{{city==null?"城市":city}}</text>
</view>
</picker>
</view>
这里用到的是picker控件,其中,bindchange方法是在我们选择完城市点击确定时触发,bindMultiPickerColumnChange方法是在我们滑动选项时触发。
value的值是我们在js里定义的数组multiIndex,multiIndex[0]表示第一列(省份)的选择, multiIndex[1]表示第二列(城市)的选择。multiArray是根据省份选择动态展示的城市列表数据,我们在js的选择事件里会去编写这段逻辑。
三、编写二级选择框需要的JS
下面,是我们这个页面的JS代码:
js:
var list = [];
import {
multiArray,
objectMultiArray
} from '../../utils/city.js';
Page({
data: {
city: null,
multiIndex: [0, 0],
multiArray: multiArray,
objectMultiArray: objectMultiArray
},
bindMultiPickerChange: function (e) {
this.setData({
city: this.data.multiArray[1][this.data.multiIndex[1]]
})
},
bindMultiPickerColumnChange: function (e) {
console.log(e);
var that = this;
switch (e.detail.column) {
case 0:
list = [];
for (var i = 0; i < that.data.objectMultiArray.length; i++) {
if (that.data.objectMultiArray[i].parid == that.data.objectMultiArray[e.detail.value].regid) {
list.push(that.data.objectMultiArray[i].regname);
}
}
that.setData({
"multiArray[1]": list,
multiIndex: [e.detail.value, 0]
})
break;
case 1:
that.setData({
"multiIndex[1]": e.detail.value,
})
break;
}
}
})
四、编写二级选择框需要的CSS
最后,是CSS样式文件。
wxss:
.inputbox {
border-radius: 15px;
margin-top: 8rpx;
padding: 0 12px;
box-sizing: border-box;
border-bottom: 1px solid #dadada;
width: 100%;
height: 86rpx;
line-height: 15px;
font-size: 14px;
background-color: #fff;
}
.picker-text {
flex: 1;
}
.flex {
display: -webkit-flex;
display: -ms-flex;
display: flex;
align-items: center;
justify-content: center;
}
深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上鸿蒙开发知识点,真正体系化!
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新
了95%以上鸿蒙开发知识点,真正体系化!**
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新