123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203 |
- <template>
- <view class="u-page" ref="page">
- <u-navbar
- title="选择器"
- @leftClick="navigateBack"
- safeAreaInsetTop
- fixed
- placeholder
- ></u-navbar>
- <u-cell-group>
- <u-cell
- @click="showPicker(index)"
- :title="item.title"
- v-for="(item, index) in list"
- :key="index"
- isLink
- >
- <image
- slot="icon"
- class="u-cell-icon"
- :src="item.iconUrl"
- mode="widthFix"
- ></image>
- </u-cell>
- </u-cell-group>
- <u-picker
- :show="show1"
- :columns="columns1"
- @change="change"
- @cancel="cancel"
- @confirm="confirm"
- ></u-picker>
- <u-picker
- :show="show2"
- :columns="columns2"
- :defaultIndex="[1]"
- @cancel="cancel"
- @confirm="confirm"
- @change="change"
- ></u-picker>
- <u-picker
- :show="show3"
- :columns="columns3"
- ref="uPicker3"
- @cancel="cancel"
- @confirm="confirm"
- @change="changeHandler1"
- ></u-picker>
- <u-picker
- :show="show4"
- :columns="columns4"
- @cancel="cancel"
- @confirm="confirm"
- :loading="loading"
- @change="changeHandler2"
- ref="uPicker4"
- ></u-picker>
- <u-picker
- :show="show5"
- :columns="columns5"
- title="标题太长就会显示省略号"
- @cancel="cancel"
- @confirm="confirm"
- @change="change"
- ></u-picker>
- <u-picker
- :show="show6"
- :columns="columns6"
- closeOnClickOverlay
- @cancel="cancel"
- @confirm="confirm"
- @close="close"
- @change="change"
- ></u-picker>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- index: 0,
- loading: false,
- columnData: [
- ['深圳', '厦门', '上海', '拉萨'],
- ['得州', '华盛顿', '纽约', '阿拉斯加']
- ],
- columns1: [
- ['中国', '美国', '日本']
- ],
- columns2: [
- ['中国', '美国', '日本']
- ],
- columns3: [
- ['中国', '美国'],
- ['深圳', '厦门', '上海', '拉萨']
- ],
- columns4: [
- ['中国', '美国'],
- ['深圳', '厦门', '上海', '拉萨']
- ],
- columns5: [
- ['中国', '美国', '日本']
- ],
- columns6: [
- ['中国', '美国', '日本']
- ],
- show1: false,
- show2: false,
- show3: false,
- show4: false,
- show5: false,
- show6: false,
- list: [{
- title: '基础使用',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/2.png'
- },
- {
- title: '设置默认项',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/5.png'
- },
- {
- title: '多列联动',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/1.png'
- },
- {
- title: '加载中状态(切换第一列)',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/3.png'
- },
- {
- title: '设置标题',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/4.png'
- }, {
- title: '允许点击遮罩关闭',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/6.png'
- },
- ]
- }
- },
- methods: {
- changeHandler1(e) {
- this.change(e)
- const {
- columnIndex,
- value,
- values,
- index,
- // 微信小程序无法将picker实例传出来,只能通过ref操作
- picker = this.$refs.uPicker3
- } = e
- if (columnIndex === 0) {
- picker.setColumnValues(1, this.columnData[index])
- }
- },
- changeHandler2(e) {
- this.change(e)
- const {
- columnIndex,
- value,
- values,
- index,
- // 微信小程序无法将picker实例传出来,只能通过ref操作
- picker = this.$refs.uPicker4
- } = e
- if (columnIndex === 0) {
- this.loading = true
- uni.$u.sleep(1500).then(() => {
- picker.setColumnValues(1, this.columnData[index])
- this.loading = false
- })
- }
- },
- navigateBack() {
- uni.navigateBack()
- },
- change(e) {
- // console.log('change', e);
- },
- showPicker(index) {
- this.index = index + 1
- this[`show${index + 1}`] = true
- },
- close() {
- // console.log('close');
- this[`show${this.index}`] = false
- },
- confirm(e) {
- // console.log('confirm', e);
- this[`show${this.index}`] = false
- },
- cancel() {
- // console.log('cancel');
- this[`show${this.index}`] = false
- }
- },
- }
- </script>
- <style lang="scss">
- .u-page {
- padding: 0;
- }
- </style>
|