发表于: 2020-07-01 21:21:49

1 2419


一,今天完成的事情

接着做小程序

编写个人条件选择页面,并使用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
    })
  }
})

配置导航


二,明天接着做小程序。



返回列表 返回列表
评论

    分享到