微信小程序 地区选择器 和省市县三级联动 和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>