微信小程序—自定义（城市选择）弹窗组件，将弹窗组件的值传给调用页面并显示（图文）

最新推荐文章于 2024-04-03 19:09:54 发布

Poppy_LYT

最新推荐文章于 2024-04-03 19:09:54 发布

阅读量2.8k

点赞数 2

分类专栏：微信小程序文章标签：自定义组件组件传值

本文链接：https://blog.csdn.net/Poppy_LYT/article/details/100048149

版权

本文介绍了如何在微信小程序中创建一个自定义的城市选择弹窗组件，详细步骤包括新建component文件夹，创建cityModal组件的wxml、wxss、js文件。在引用组件的页面如home，通过配置json、wxml和js来实现组件展示及值的传递。通过点击组件中的城市，可以更新调用页面的城市显示。

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

微信小程序—自定义（城市选择）弹窗组件，并传值

1、新建component文件夹用来存放自定义组件，并在其文件夹内新建cityModal Component，注意不是新建Page
在这里插入图片描述

新建完成之后出现四个和Page一样后缀的文件，只是里面的内容不一样而已

2、cityModal.wxml(可直接粘贴)

<view 
  class="cityModal" 
  wx:if="{
  {cityModalShow}}" 
>
  <!-- 城市选框 -->
  <view class="cities">
    <view class="title">选择城市</view>
    <view class="cityName">
      <block wx:key="{
  {index}}" wx:for="{
  {cities}}">
        <text 
          class="cityItem"
          bindtap="getCity"