本文共 6403 字，大约阅读时间需要 21 分钟。

picker 从底部弹起的滚动选择器

     
    
     普通选择器
      
        
     
            当前选择：{
   {
   array[index]}}    
       
    
   
     
    
     多列选择器
      
        
     
            当前选择：{
   {
   multiArray[0][multiIndex[0]]}}，{
   {
   multiArray[1][multiIndex[1]]}}，{
   {
   multiArray[2][multiIndex[2]]}}    
       
    
   
     
    
     时间选择器
      
        
     
            当前选择: {
   {
   time}}    
       
    
   
     
    
     日期选择器
      
        
     
            当前选择: {
   {
   date}}    
       
    
   
     
    
     省市区选择器
      
        
     
            当前选择：{
   {
   region[0]}}，{
   {
   region[1]}}，{
   {
   region[2]}}    
       
    
   

Page({
     data: {
       array: ['美国', '中国', '巴西', '日本'],    objectArray: [      {
           id: 0,        name: '美国'      },      {
           id: 1,        name: '中国'      },      {
           id: 2,        name: '巴西'      },      {
           id: 3,        name: '日本'      }    ],    index: 0,    multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],    objectMultiArray: [      [        {
             id: 0,          name: '无脊柱动物'        },        {
             id: 1,          name: '脊柱动物'        }      ], [        {
             id: 0,          name: '扁性动物'        },        {
             id: 1,          name: '线形动物'        },        {
             id: 2,          name: '环节动物'        },        {
             id: 3,          name: '软体动物'        },        {
             id: 3,          name: '节肢动物'        }      ], [        {
             id: 0,          name: '猪肉绦虫'        },        {
             id: 1,          name: '吸血虫'        }      ]    ],    multiIndex: [0, 0, 0],    date: '2016-09-01',    time: '12:01',    region: ['广东省', '广州市', '海珠区'],    customItem: '全部'  },  bindPickerChange: function(e) {
       console.log('picker发送选择改变，携带值为', e.detail.value)    this.setData({
         index: e.detail.value    })  },  bindMultiPickerChange: function (e) {
       console.log('picker发送选择改变，携带值为', e.detail.value)    this.setData({
         multiIndex: e.detail.value    })  },  bindMultiPickerColumnChange: function (e) {
       console.log('修改的列为', e.detail.column, '，值为', e.detail.value);    var data = {
         multiArray: this.data.multiArray,      multiIndex: this.data.multiIndex    };    data.multiIndex[e.detail.column] = e.detail.value;    switch (e.detail.column) {
         case 0:        switch (data.multiIndex[0]) {
             case 0:            data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];            data.multiArray[2] = ['猪肉绦虫', '吸血虫'];            break;          case 1:            data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];            data.multiArray[2] = ['鲫鱼', '带鱼'];            break;        }        data.multiIndex[1] = 0;        data.multiIndex[2] = 0;        break;      case 1:        switch (data.multiIndex[0]) {
             case 0:            switch (data.multiIndex[1]) {
                 case 0:                data.multiArray[2] = ['猪肉绦虫', '吸血虫'];                break;              case 1:                data.multiArray[2] = ['蛔虫'];                break;              case 2:                data.multiArray[2] = ['蚂蚁', '蚂蟥'];                break;              case 3:                data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];                break;              case 4:                data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];                break;            }            break;          case 1:            switch (data.multiIndex[1]) {
                 case 0:                data.multiArray[2] = ['鲫鱼', '带鱼'];                break;              case 1:                data.multiArray[2] = ['青蛙', '娃娃鱼'];                break;              case 2:                data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];                break;            }            break;        }        data.multiIndex[2] = 0;        break;    }    console.log(data.multiIndex);    this.setData(data);  },  bindDateChange: function(e) {
       console.log('picker发送选择改变，携带值为', e.detail.value)    this.setData({
         date: e.detail.value    })  },  bindTimeChange: function(e) {
       console.log('picker发送选择改变，携带值为', e.detail.value)    this.setData({
         time: e.detail.value    })  },  bindRegionChange: function (e) {
       console.log('picker发送选择改变，携带值为', e.detail.value)    this.setData({
         region: e.detail.value    })  }})

picker-view 嵌入页面的滚动选择器

     
        
     
      {
   {
   year}}年{
   {
   month}}月{
   {
   day}}日{
   {
   isDaytime ? "白天" : "夜晚"}}
         
           
              
       
        {
   {
   item}}年
             
            
              
       
        {
   {
   item}}月
             
            
              
       
        {
   {
   item}}日
             
            
              
                 
                
               
                 
                
             
          
       
    
   

const date = new Date()const years = []const months = []const days = []for (let i = 1990; i <= date.getFullYear(); i++) {
     years.push(i)}for (let i = 1; i <= 12; i++) {
     months.push(i)}for (let i = 1; i <= 31; i++) {
     days.push(i)}Page({
     onShareAppMessage() {
       return {
         title: 'picker-view',      path: 'page/component/pages/picker-view/picker-view'    }  },  data: {
       years,    year: date.getFullYear(),    months,    month: 2,    days,    day: 2,    value: [9999, 1, 1],    isDaytime: true,  },  bindChange(e) {
       const val = e.detail.value    this.setData({
         year: this.data.years[val[0]],      month: this.data.months[val[1]],      day: this.data.days[val[2]],      isDaytime: !val[3]    })  }})

slider 滑动选择器

var pageData = {
   }for (var i = 1; i < 5; ++i) {
     (function (index) {
       pageData[`slider${
     index}change`] = function (e) {
         console.log(`slider${
     index}发生change事件，携带值为`, e.detail.value)    }  })(i);}Page(pageData)

       
            
     
      slider
             
     
      滑块
         
        
            
                 
      
       设置left/right icon
                  
                      
                   
              
             
                 
      
       设置step
                  
                      
                   
              
             
                 
      
       显示当前value
                  
                      
                   
              
             
                 
      
       设置最小/最大值
                  
                      
                   
              
         
    
   

转载地址：https://codeboy.blog.csdn.net/article/details/107686367 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！