1.效果

2.子组件在components里面创建组件AddreessWindow

<template><view style="position: relative;z-index: 999999 !important;"><view class="address-window" :class="value === true ? 'on' : ''"><view class="title"><view>选择地址</view><view style="position: absolute;right: 20rpx;top: 39rpx;"><u-icon name="close" color="#666" size="20" @click="closeAddress"></u-icon></view></view><view class="list" v-if="addressList.length"><view class="item acea-row row-between-wrapper" :class="item.id === checked ? 'font-color-green' : ''"v-for="(item, addressIndex) in addressList" @click="tapAddress(addressIndex)" :key="addressIndex"><u-icon name="map" :color="item.id === checked?'#99CC00':'#000'" size="20"></u-icon><!-- <text class="iconfont icon-ditu" :class="item.id === checked ? 'font-color-green' : ''"></text> --><view class="addressTxt"><view class="name" :class="item.id === checked ? 'font-color-green' : ''">{{ item.realName }}<text class="phone">{{ item.phone }}</text></view><view class="line1"> {{ item.province }}{{ item.city }}{{ item.district }}{{ item.detail }}</view></view><!-- <text class="iconfont icon-complete" :class="item.id === checked ? 'font-color-green' : ''"></text> --><u-icon name="checkmark" v-if="item.id === checked" color="#99CC00" size="20"></u-icon></view></view><view class="pictrue" v-if="addressList.length < 1"><!-- <image :src="`${$VUE_APP_RESOURCES_URL}/images/noAddress.png`" class="image" /> --><u-empty textSize='36rpx' text="空空如也" textColor='#A8D61E' width='512' height='251' mode="list":icon="`${imgUrl}empty.png`"></u-empty></view><view class="addressBnt bg-color-red"style="background-color:#99CC00 !important;color: #FFFFFF !important; font-size: 31rpx !important;"@click="goAddressPages">新加地址</view></view><view class="mask" @touchmove.prevent :hidden="value === false" @click="closeAddress"></view></view>
</template>
<script>// import { getAddressList } from '@/api/dsIndexApi.js'export default {name: 'AddressWindow',props: {value: Boolean,checked: Number,timer: Number},data: function() {return {imgUrl: '',addressList: [],current: 0,cartId: 0,pinkId: 0,couponId: 0,}},mounted: function() {this.imgUrl = this.$VUE_APP_IMG_URL;},created() {// console.},methods: {getAddressList: function() {let that = this;that.addressList = [{id: 1,realName: '哈哈嗝',phone: '14708291001',province: "四川省",city: "成都市",district: "武侯区",detail: "阳光大道",},{id: 2,realName: '张三',phone: '14708291000',province: "四川省",city: "成都市",district: "武侯区",detail: "大悦城",}]//   getAddressList().then(res => {// // console.log('获取地址额列表',res)//     that.addressList = res.data;//   })},closeAddress() {this.$emit('input', false)},goAddressPages: function() {uni.navigateTo({url: '/pages/address/address'})this.$emit('redirect')},tapAddress: function(index) {this.$emit('checked', this.addressList[index])this.$emit('input', false)},},watch: {timer(e, v) {console.log(e, v, '变换了')this.getAddressList()},},}
</script>
<style lang="scss">.font-color-green {color: #99CC00 !important;}.mask {display: flex;align-items: flex-end;position: fixed;left: 0;top: 0px;bottom: 0;width: 100%;background: rgba(0, 0, 0, 0.6);z-index: 9995;transition: .3s;}/*地址弹窗*/.address-window {background-color: #fff;position: fixed;bottom: 0;left: 0;width: 100%;z-index: 10000;transform: translate3d(0, 100%, 0);transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);}.address-window.on {transform: translate3d(0, 0, 0);}.address-window .title {font-size: 0.32 * 100rpx;font-weight: bold;text-align: center;height: 1.23 * 100rpx;line-height: 1.23 * 100rpx;position: relative;color: #333;display: flex;align-items: center;justify-content: center;}.address-window .title .iconfont {position: absolute;right: 0.3 * 100rpx;color: #8a8a8a;font-size: 0.35 * 100rpx;}.address-window .list {max-height: 6 * 100rpx;overflow-y: auto;overflow-x: hidden;}.address-window .list .item {margin-left: 0.3 * 100rpx;padding-right: 0.3 * 100rpx;border-bottom: 1px solid #eee;height: 1.29 * 100rpx;font-size: 0.25 * 100rpx;color: #333;display: flex;align-items: center;}.address-window .list .item .iconfont {font-size: 0.37 * 100rpx;color: #2c2c2c;}.address-window .list .item .iconfont.icon-complete {font-size: 0.3 * 100rpx;color: #fff;}.address-window .list .item .addressTxt {width: 5.6 * 100rpx;}.address-window .list .item .addressTxt .name {font-size: 0.28 * 100rpx;font-weight: bold;color: #282828;margin-bottom: 0.04 * 100rpx;}.address-window .list .item .addressTxt .name .phone {margin-left: 0.18 * 100rpx;}.address-window .addressBnt {font-size: 0.3 * 100rpx;font-weight: bold;color: #fff;width: 6.9 * 100rpx;height: 0.86 * 100rpx;border-radius: 0.43 * 100rpx;text-align: center;line-height: 0.86 * 100rpx;margin: 0.85 * 100rpx auto;}.address-window .pictrue {width: 4.14 * 100rpx;height: 3.36 * 100rpx;margin: 0.8 * 100rpx auto;}.address-window .pictrue .image {width: 100%;height: 100%;}
</style>

3.父组件

<template><view class="container"><view @click="skipAddress">选择地址</view><!-- 地址弹框 --><AddressWindow :timer="timer" @checked="changeAddress" @redirect="addressRedirect" v-model="showAddress":checked="addressInfo.id" ref="mychild"></AddressWindow></view></template><script>export default {data() {return {addressInfo: {},addressLoaded: false,timer: '',showAddress: false,}},methods:{//选地址skipAddress() {this.timer = new Date().getTime();this.showAddress = true;if (!this.addressLoaded) {this.addressLoaded = truethis.$refs.mychild.getAddressList()}},// 控制地址弹框addressRedirect() {// this.addressLoaded = falsethis.showAddress = false;},// 地址选择changeAddress(addressInfo) {this.addressInfo = addressInfo// this.addressInfo.id = addressInfo.id;console.log('地址栏11111', this.addressInfo)//计算订单金额// this.orderComputedAPi(this.addressInfo.id)},}}</script>