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

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

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" data-text='{{item}}>{{item}}</text></block></view></view><!-- 关闭按钮 --><view class="closeBtn" bindtap="hideCityModal">x</view>
</view>

3、cityModal.wxss(可直接粘贴)

.cityModal{width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);position: fixed;top: 0;left: 0;z-index: 999;
}
.cityModal .cities{width: 578rpx;height: 500rpx;background: #fff;border-radius: 12rpx;color: #2d2d2d;margin: 25% auto;margin-bottom: 0;
}
.cityModal .cities .title{font-size: 30rpx;text-align: center;padding: 30rpx;
}
.cityModal .cities .cityName{font-size: 28rpx;display: flex;flex-wrap: wrap;
}
.cityModal .cities .cityName .cityItem{text-align: center;width: 189rpx;height: 77rpx;
}
.cityModal .closeBtn{width: 72rpx;height: 72rpx;line-height: 64rpx;text-align: center;color: #fff;background: #949494;border: 6rpx solid #fff;border-radius: 50%;font-size: 70rpx;margin: 60rpx auto;
}

4、cityModal.js（和vue很类似）

data: {//    页面布局循环的的城市数组 cities: ['上海', '常州', '苏州', '杭州', '宁波', '无锡', '南京', '北京', '天津', '绍兴', '重庆', '成都', '台州', '嘉兴'],// 城市模态框的显示和隐藏cityModalShow: false},methods: {// 点击城市出现选择城市模态框showCityModal: function () {this.setData({ cityModalShow: true })},// 点击遮盖层选择城市模态框消失hideCityModal: function () {this.setData({ cityModalShow: false })},// 获取点击的城市getCity: function (e) { this.setData({ cityModalShow: false })// 在第5步中绑定的事件，第一个参数是事件名，第二个参数是获取的text的值，// 如何获取text的值请[参考](https://blog.csdn.net/Poppy_LYT/article/details/100022893)this.triggerEvent('myevent', e.currentTarget.dataset.text);}}

4、打开你要引用这个cityModal组件的页面
我是在home页面写的
home.json

"usingComponents": {
// 注意：这里不需要../../去找这个组件的路径，直接这样写即可
// cityModal这个名字是自己起的组件名字，在home.wxml里引入"cityModal": "/component/cityModal/cityModal"},

5、home.wxml
在home页面引入组件，你在usingComponents里面定义的是啥名字就在这儿写啥名字

// 这个是点击城市定位的按钮，需要弹出组件，这里绑定一个事件showCityModal（随便起的）
<view class="city" bindtap="showCityModal"><text class="citytext">{{city}}</text> // 这个city在data里定义过了，起始值是北京
</view>
<!-- 引入选择城市弹窗组件 -->
// 给这个组件绑定一个myevent事件，给这个页面绑定一个onMyEvent事件<cityModal id="cityModal" bind:myevent="onMyEvent"></cityModal>

6、home.js

data: {city: '北京' // 城市的起始值，后面需要用来切换选择的城市
}
onReady: function () {
// 获取到这个组件 括号内的名字就是你第5步在home.wxml里引入组件的时候给的id
// this.cityModal这个名字也是自定义的this.cityModal = this.selectComponent("#cityModal");},// 点击城市出现选择城市模态框// 第一个showCityModal是第5步在home.js里绑定的// 方法内的showCityModal是调用的组件里的方法// 这里的this.cityModal就是你在onReady里获取到的这个组件showCityModal: function () {this.cityModal.showCityModal();},// 传值，在第5步绑定的 // 将用于显示选择城市的变量city设置成组件传递过来的值// 组件的值是请看第3步onMyEvent: function (e) {this.setData({city: e.detail})},

点击查看效果：
点击北京这个按钮，弹出组件

点击组件中的常州，页面的城市更换成常州

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

微信小程序实现城市选择效果(超详细)
直接进入正题首先在项目中同级创建一个components文件夹,在文件夹下创建region-picker文件夹,在该文件夹点击右键新建Component就会创建名为 region-picker.js ...
微信小程序实现城市选择和定位
效果如图: 这么多城市需要city.js,放在utils下面具体内容如下,很多城市 var cityObj = [{ "id": "35", "pr ...
微信小程序自定义select下拉选择组件
微信小程序自定义select下拉选择组件微信小程序原生开发中,常用到的是从底部弹起的滚动选择器(picker),而有些项目需要用到下拉选择,话不多说,下面就可以把下拉选择封装成一个自定义组件: 1. ...
微信小程序自定义类似微信联系人组件
微信小程序自定义联系人弹窗在小程序项目中需要有一个选择人员项,想着看着好看一些,所以做成类似微信联系人的界面,由于本人是后端人员,效果不是特别好看,ui使用的是weui 效果图如下: 使用的是小程序 ...
安卓自定义时间选择器_微信小程序拾色器（颜色选择器）组件
点击上方"极客小寨",选择"置顶公众号" 第一时间关注程序猿(媛)身边的故事大家好,我是独立开发者东东,如今在web项目中不少地方需要用到颜色选择器,比如设置 ...
微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注为何存在组件组件间的关系使用rel ...
微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
微信小程序自定义picker弹框组件
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 柚子写项目遇到了一个问题,就是微信小程序官方文档上面的弹框组件picker,它 ...

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

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

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

最新文章

热门文章