微信小程序下拉组件

微信小程序下拉组件引入

最新推荐文章于 2025-05-02 10:26:54 发布

原创

最新推荐文章于 2025-05-02 10:26:54 发布 · 278 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在微信小程序中实现下拉选择组件。通过分析`select.wxml`、`select.wxss`和`select.js`文件的内容，了解组件的结构、样式和交互逻辑。在`index.json`中引入该组件，最终展示了一个功能完善的下拉选择效果。

select.wxml

<view class="select-box">
  <view class="select-current" catchtap="openClose">
    <text class="current-name">{
  
  {current.name}}</text>
  </view>
  <view class="option-list" wx:if="{
  
  {isShow}}" catchtap="optionTap">
    <!-- <text class="option"
      data-id="{
  
  {defaultOption.id}}"
      data-name="{
  
  {defaultOption.name}}">{
  
  {defaultOption.name}}
    </text> -->
    <text class="option"
      wx:for="{
  
  {result}}"
      wx:key="{
  
  {item.id}}"
      data-id="{
  
  {item.id}}"
      data-name="{
  
  {item.name}}">{
  
  {item.name}}
    </text>
  </view>
</view>

select.wxss

.select-box {
  position: relative;
  width: 100%;
  font-size: 30rpx;
}

.select-current {
  position: relative;
  /* width: 100%; */
  /* line-height