# tui-picker 联动选择
# picker组件联动
picker
组件的具体使用请参考 官方文档 (opens new window)。
设置mode = multiSelector,多列选择器。
change
事件:value 改变时触发 change 事件,event.detail = {value: value}
columnchange
事件:某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标
<!--uni-app-->
<picker :value="value" mode="multiSelector" @change="picker" @columnchange="columnPicker" :range="multiArray">
<tui-button shape="circle">请选择</tui-button>
</picker>
<!--微信小程序-->
<picker value="{{value}}" mode="multiSelector" bindchange="picker" bindcolumnchange="columnPicker" range="{{multiArray}}">
<tui-button shape="circle">请选择</tui-button>
</picker>
约定好数据格式,联动逻辑实现主要根据事件触发进行相关数据处理,具体实现参考示例程序。
# picker-view组件联动
picker-view
组件的具体使用请参考 官方文档 (opens new window)。
change
事件:当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始)
<!--uni-app-->
<picker-view indicator-style="height: 50px;" class="picker-view" :value="value" @change="columnPicker">
<picker-view-column>
<view v-for="(item,index) in proviceArr" :key="index" class="item">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view v-for="(item,index) in cityArr" :key="index" class="item">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view v-for="(item,index) in districtArr" :key="index" class="item">{{item}}</view>
</picker-view-column>
</picker-view>
<!--微信小程序-->
<picker-view indicator-style="height: 50px;" class="picker-view" value="{{value}}" bindchange="columnPicker">
<picker-view-column>
<view wx:for="{{proviceArr}}" wx:key="index" class="item">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{cityArr}}" wx:key="index" class="item">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{districtArr}}" wx:key="index" class="item">{{item}}</view>
</picker-view-column>
</picker-view>
约定好数据格式,联动逻辑实现主要根据事件触发进行相关数据处理,具体实现参考示例程序。
# 预览
完整的全国省市区数据下载 city-data
(opens new window)
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |