微信小程序下拉组件

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

ACGuan

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

阅读量221

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/csdnlinyongsheng/article/details/109690639

版权

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

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

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