uniapp - picker

 

【普通json数组】

针对官方的普通json数组示例，做些填充

  1 <template>
  2     <view>
  3         <view class="uni-title uni-common-pl">地区选择器</view>
  4         <view class="uni-list">
  5             <view class="uni-list-cell">
  6                 <view class="uni-list-cell-db">
  7                     <picker @change="bindPickerChange" :value="index" :range="array">
  8                         <view class="uni-input">{{array[index]}}</view>
  9                     </picker>
 10                 </view>
 11             </view>
 12         </view>
 13 
 14         <view class="uni-title uni-common-pl">地区选择器(普通Json数组)</view>
 15         <view class="uni-list">
 16             <view class="uni-list-cell">
 17                 <view class="uni-list-cell-db">
 18                     <view v-for="(item,indexs) in 10" style="margin-bottom: 10%;border-bottom: 1upx solid #eee;">
 19                         <picker @change="bindPickerChanges" range-key="name" :data-index="indexs" :data-id="objectArray[index].id" :value="index" :range="objectArray">
 20                             <view class="uni-input">{{objectArray[index].name}}</view>
 21                         </picker>
 22                     </view>
 23                 </view>
 24             </view>
 25         </view>
 26 
 27         <view class="uni-title uni-common-pl">时间选择器</view>
 28         <view class="uni-list">
 29             <view class="uni-list-cell">
 30                 <view class="uni-list-cell-db">
 31                     <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
 32                         <view class="uni-input">{{time}}</view>
 33                     </picker>
 34                 </view>
 35             </view>
 36         </view>
 37 
 38         <view class="uni-title uni-common-pl">日期选择器</view>
 39         <view class="uni-list">
 40             <view class="uni-list-cell">
 41                 <view class="uni-list-cell-db">
 42                     <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
 43                         <view class="uni-input">{{date}}</view>
 44                     </picker>
 45                 </view>
 46             </view>
 47         </view>
 48     </view>
 49 </template>
 50 
 51 <script>
 52     export default {
 53         data() {
 54             const currentDate = this.getDate({
 55                 format: true
 56             })
 57             return {
 58                 title: 'picker',
 59                 array: ['中国', '美国', '巴西', '日本'],
 60                 objectArray: [{
 61                         id: 11,
 62                         name: '中国'
 63                     },
 64                     {
 65                         id: 12,
 66                         name: '美国'
 67                     },
 68                     {
 69                         id: 13,
 70                         name: '德国'
 71                     },
 72                     {
 73                         id: 14,
 74                         name: '法国'
 75                     }
 76                 ],
 77                 index: 0,
 78                 date: currentDate,
 79                 time: '12:01'
 80             }
 81         },
 82         computed: {
 83             startDate() {
 84                 return this.getDate('start');
 85             },
 86             endDate() {
 87                 return this.getDate('end');
 88             }
 89         },
 90         methods: {
 91             bindPickerChange: function(e) {
 92                 console.log('picker发送选择改变，携带值为', e.target.value)
 93                 this.index = e.target.value
 94             },
 95             bindPickerChanges: function(e) {
 96                 console.log('可以传data-xx:xx',e.currentTarget.dataset.index,'\n默认传过来的是下标：',e.detail.value,'\n也可以传普通json传过来的id等：',e.currentTarget.dataset.id);
 97             },
 98             bindDateChange: function(e) {
 99                 this.date = e.target.value
100             },
101             bindTimeChange: function(e) {
102                 this.time = e.target.value
103             },
104             getDate(type) {
105                 const date = new Date();
106                 let year = date.getFullYear();
107                 let month = date.getMonth() + 1;
108                 let day = date.getDate();
109 
110                 if (type === 'start') {
111                     year = year - 60;
112                 } else if (type === 'end') {
113                     year = year + 2;
114                 }
115                 month = month > 9 ? month : '0' + month;;
116                 day = day > 9 ? day : '0' + day;
117                 return `${year}-${month}-${day}`;
118             }
119         }
120     }
121 </script>

 

转载于:https://www.cnblogs.com/cisum/p/11175198.html