微信小程序实现下拉选择功能1、index.wxml页面：2、index.js页面：3、方法4、index.wxss(样式

1、index.wxml页面：

<view class="worksName"> 
   <picker name="picker_hx" class="cybm_pic_1"
 value="{{artistClassify[ysj_index].id}}" 
data-selecthx="{{artistClassify[ysj_index].name}}"
 range="{{artistClassify}}" 
range-key="{{'name'}}"
 bindchange="bindPickerChange_hx">  
    <view class="worksNames">      
  <view class="picker">        
  {{artistClassify[ysj_index].name}}  
      </view>      
  <view>        
  <image src="../../img/xl.png" />     
   </view>    
  </view>    
</picker> 
 </view>

2、index.js页面：

data:{ 
artistClassify:[ 
     {   "id": 1,    "name": "注册艺术家"   },   
   {    "id": 2,    "name": "非遗艺术家"      }, 
    {   "id": 3,    "name": "海外艺术家"   },   
   {   "id": 4,     "name": "收藏家"   }   
 ],     
  ysj_index: 0,
}

3、方法

 bindPickerChange_hx: function (e) {  
  console.log('picker发送选择改变，携带值为', e.detail.value); 
   this.setData({   //给变量赋值  
    ysj_index: e.detail.value,  //每次选择了下拉列表的内容同时修改下标然后修改显示的内容，显示的内容和选择的内容一致  
  })  
  console.log('自定义值:', 
 },

4、index.wxss(样式根据自己需求定义）

.worksNames{ 
 display:flex; 
 flex-direction: row; 
 justify-content: center;
 }.
cybm_pic_1 image{  
height:28rpx; 
 width:28rpx; 
 margin-left:-40rpx;
}
.picker{
font-size:30rpx;
 border-bottom: 2rpx solid #ccc; 
 height: 90rpx; 
 color:#444;  
 width:100%;
}