微信小程序—自定义（城市选择）弹窗组件，并传值
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的值请[参考](/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})},
点击查看效果：
点击北京这个按钮，弹出组件
点击组件中的常州，页面的城市更换成常州
