微信小程序自定义html样式的下拉列表（下拉框）

最新推荐文章于 2024-08-06 09:03:34 发布

小码哥学习中

最新推荐文章于 2024-08-06 09:03:34 发布

阅读量1.1k

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/boveysmith/article/details/109544238

版权

微信小程序中没有内置的HTML下拉框组件，本文介绍如何自定义实现这一功能。通过结合WXML、WXSS和JS代码，展示了一个带有动画效果的下拉列表。在实现过程中需要注意图标资源的引入和路径设置。

摘要由CSDN通过智能技术生成

微信小程序里没有和HTML里的下拉框一样的组件，想要相同的效果只能自己写一个，先看效果

下面来看一下代码：

首先WXML

<view class='select_box'>
 <view class='select' catchtap='selectTap'>
  <text class='select_text'>{
  {selectData[index]}}</text>
  <image class='select_img {
  {show&&"select_img_rotate"}}' src='/image/gobottom.png'></image>   
 </view>
 <view class='option_box' style='height:{
  {show?(selectData.length>5?300:selectData.length*60):0}}rpx;'>
  <text class='option' style='{
  {index==selectData.length-1&&"border:0;"}}' wx:for='{
  {selectData}}' wx: