小程序模板网

小程序之ecshop地址3级联动

picker标签,官方给出的实例:

 

				
  1. <view class="section">
  2. <view class="section__title">地区选择器</view>
  3. <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  4. <view class="picker">
  5. 当前选择:{{array[index]}}
  6. </view>
  7. </picker>
  8. </view>
 

				
  1. Page({
  2. data: {
  3. array: ['美国', '中国', '巴西', '日本'],
  4. index: 0,
  5. },
  6. bindPickerChange: function(e) {
  7. console.log('picker发送选择改变,携带值为', e.detail.value)
  8. this.setData({
  9. index: e.detail.value
  10. })
  11. },
  12. })

wxml页面:

 

				
  1. <view class="add-list under-line" >
  2.  
  3. <view class="add-lab">收货地址</view>
  4. <view class="add-text">
  5. <picker class="w-3" bindchange="bindPickerProvince" value="{{provinceIndex}}" range="{{province}}" >
  6. <view class="picker">{{province[provinceIndex]}}</view>
  7. </picker>
  8. <picker class="w-3" bindchange="bindPickerCity" value="{{cityIndex}}" range="{{city}}" >
  9. <view class="picker">{{city[cityIndex]}}</view>
  10. </picker>
  11. <picker class="w-3" bindchange="bindPickerDistrict" value="{{districtIndex}}" range="{{district}}" >
  12. <view class="picker">{{district[districtIndex]}}</view>
  13. </picker>
  14. </view>
  15. </view>

js页面:

 

				
  1. var app = getApp()
  2. Page({
  3. data:{
  4. motto: 'jxcat',
  5. serverUrl: app.globalData.ajaxUrl,
  6. baseUrl: app.globalData.baseUrl,


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23348.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询