微信小程序 地区选择器 和省市县三级联动 和button按钮分享

wxml代码：

<view class="section__title">
地区选择器
</view>

<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">

  <view class="picker">


 当前选择：{{array[index]}}
  
</view>


</picker>
 

wxjs 代码：

// pages/per/per.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        array: ['美国', '中国', '巴西', '日本'],
        index: 0,
        date: '2016-09-01',
        time: '12:01'
      

    },
 bindPickerChange: function(e) {
  console.log('picker发送选择改变，携带值为', e.detail.value)
  this.setData({

 index: e.detail.value
  })
},

效果图：

 

省市县三级联动：

wxml代码：

<view class="section">
  <view class="section__title">省市区选择器</view>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker">
      当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
    </view>
  </picker>
</view>

wxjs代码：

// pages/per/per.js
Page({


    /**
     * 页面的初始数据
     */
    data: {
      
        region: ['广东省', '广州市', '海珠区'],
   
    },
    bindRegionChange: function (e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
          region: e.detail.value
        })
      },

效果图：

 

 

 button 按钮分享

<button type="primary" open-type="share">分享我</button>