发表于： 2020-07-01 21:21:49
1 2420
一，今天完成的事情
接着做小程序
编写个人条件选择页面，并使用picker组件，完成选择功能
效果：
组件文件夹拉picker组件
在demo页面中添加组件
在demo.wxml中添加组件入口
picker组件tabs.wxml中引入自定义修改后的代码
<view class="h1">试试什么职业最适合你</view>
<view class="section">
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
学 历：{{array[index]}}
</view>
</picker>
</view>
<view class="section">
<picker bindchange="bindPickerChange1" value="{{index1}}" range="{{sexarray}}">
<view class="picker">
性 别：{{sexarray[index1]}}
</view>
</picker>
</view>
<view class="section">
<picker bindchange="bindPickerChange2" value="{{index2}}" range="{{agearray}}">
<view class="picker">
年 龄：{{agearray[index2]}}
</view>
</picker>
</view>
<view class="section">
<picker bindchange="bindPickerChange3" value="{{index3}}" range="{{jcarray}}">
<view class="picker">
基 础：{{jcarray[index3]}}
</view>
</picker>
</view>
<view class="section">
<picker bindchange="bindPickerChange4" value="{{index4}}" range="{{zyarray}}">
<view class="picker">
专 业：{{zyarray[index4]}}
</view>
</picker>
</view>
<view class="section">
<picker bindchange="bindPickerChange5" value="{{index5}}" range="{{ljarray}}">
<view class="picker">
逻 辑：{{ljarray[index5]}}
</view>
</picker>
</view>
picker组件tabs.js中引入自定义修改后的代码
Page({
data: {
array: ['高中以下', '高 中', '大 专', '本 科','研究生','硕 士','博 士','博士后'],
objectArray: [
{
id: 0,
name: '高中以下'
},
{
id: 1,
name: '高 中'
},
{
id: 2,
name: '大 专'
},
{
id: 3,
name: '本 科'
},
{
id: 4,
name: '研究生'
},
{
id: 5,
name: '硕 士'
},
{
id: 6,
name: '博 士'
},
{
id: 7,
name: '博士后'
}
],
index: 1,
sexarray: ['男', '女'],
objectSexArray: [
{
id: 0,
name: '男'
},
{
id: 1,
name: '女'
}
],
index1: 0,
agearray: ['18以下', '18-24岁', '25-30岁', '30岁以上'],
objectAgeArray: [
{
id: 0,
name: '18以下'
},
{
id: 1,
name: '18-24岁'
},
{
id: 2,
name: '25-30岁'
},
{
id: 3,
name: '30岁以上'
}
],
index2: 0,
jcarray: ['零基础', '计算机初级', '计算机中级', '计算机高级','大 佬'],
objectJcArray: [
{
id: 0,
name: '零基础'
},
{
id: 1,
name: '计算机初级'
},
{
id: 2,
name: '计算机中级'
},
{
id: 3,
name: '计算机高级'
},
{
id: 4,
name: '研究生'
},
{
id: 5,
name: '大 佬'
}
],
index3: 0,
zyarray: ['无','理工科', '医学类', '文 科', '艺术类'],
objectZyArray: [
{
id: 0,
name: '理工科'
},
{
id: 1,
name: '医学类'
},
{
id: 2,
name: '大 专'
},
{
id: 3,
name: '文 科'
},
{
id: 4,
name: '艺术类'
}
],
index4: 0,
ljarray: ['普 通', '中 等', '高 手', '大 佬'],
objectLjArray: [
{
id: 0,
name: '普 通'
},
{
id: 1,
name: '中 等'
},
{
id: 2,
name: '高 手'
},
{
id: 3,
name: '大 佬'
}
],
index5: 0,
},
bindPickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindPickerChange1: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index1: e.detail.value
})
},
bindPickerChange2: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index2: e.detail.value
})
},
bindPickerChange3: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index3: e.detail.value
})
},
bindPickerChange4: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index4: e.detail.value
})
},
bindPickerChange5: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index5: e.detail.value
})
}
})
配置导航
二，明天接着做小程序。
返回列表
评论