微信小程序从子页面退回父页面时的数据传递

参考地址：https://www.jianshu.com/p/aa8254b23847

效果图如下：

从子页面选值后返回父界面操作2.gif

wxss

.content {
    background-color: #fff;
    padding: 20rpx;
}
.content .search-content .search-input {
    height: 60rpx;
    font-size: 24rpx;
    background: white;
    padding-left: 20rpx;
    border: 1rpx solid #ccc;
    border-radius: 8rpx;
}
.content .types-content {
    margin-left: 20rpx;
    margin-top: 30rpx;
    white-space: nowrap;
    overflow: scroll;
    height: 150rpx;
    width: 720rpx;
}
.content .types-content .double-line {
    margin-top: 20rpx;
}
.content .types-content .brand-btn {
    font-size: 24rpx;
    border: 2rpx solid #dedede;
    border-radius: 28rpx;
    background: #f4f4f4;
    text-align: center;
    display: inline-block;
    min-width: 80rpx;
    height: 56rpx;
    line-height: 56rpx;
    margin-right: 20rpx;
    padding: 0 40rpx;
}
.content .types-content .brand-btn.active {
    color: white;
    background: #006DF7;
    border: 2rpx solid #006DF7;
}
.content .materials-content {
    padding: 40rpx;
}
.content .materials-content .item {
    margin: 0 0 40rpx;
    padding-bottom: 10rpx;
    border-bottom: 2rpx solid #E5E5E5;
}
.title{
    margin-bottom: 34rpx;
    overflow: hidden;
}
.item{
    width: 230rpx;
    height: 60rpx;
    float: left;
    text-align: center;
    border:2rpx solid #1860F6;
    color: #1860F6;
}
.active{
    color: white;
    background: #006DF7;
}

.tl-color-186{
    color: #1860F6;
}

/*选中后有标识效果更好*/
.label-1, .label-2{
    margin-bottom: 15px;
}
.label-1__text, .label-2__text {
    display: inline-block;
    vertical-align: middle;
}

.label-1__icon {
    position: relative;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    background: #fcfff4;
}

.label-1__icon-checked {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    background: #1860F6;
}


.label-2__icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 18px;
    height: 18px;
    background: #fcfff4;
    border-radius: 50px;
}

.label-2__icon-checked {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 12px;
    height: 12px;
    background: #1860F6;
    border-radius: 50%;
}

.label-4_text{
    text-align: center;
    margin-top: 15px;
}

wxml

<view class="content">

    <view class="title" >
        <block wx:for="{{topBars}}" wx:key="{{index}}">
            <view class="item {{selectIndex === index ? 'active' : ''}}" bindtap='changeItem' data-index='{{index}}'>{{item}}</view>
        </block>
        <!--<view class="item " bindtap='changeItem' data-index='{{2}}'>猫</view>
        <view class="item " bindtap='changeItem' data-index='{{1000}}'>其他</view>-->
    </view>

    <view class="clearfix"></view>
    <view class="search-content" style="width: 99%;margin-bottom: 20rpx">
        <input placeholder="搜索宠物品种"
               bindinput="inputKw"
               class="search-input" />
    </view>


    <view class="section section_gap">
        <radio-group class="group" bindchange="radioChange">
            <view class="label-2" wx:for="{{radioItems}}" wx:key="index">
                <radio id="{{item.id}}" hidden value="{{item.id}}" checked="{{item.checked}}"></radio>
                <view class="label-2__icon">
                    <view class="label-2__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
                </view>
                <label class="label-2__text" for="{{item.id}}"><text>{{item.name}}</text></label>
            </view>
        </radio-group>
    </view>

</view>

js

重点说明1：子页面把值存到父级页面上去：

//根据选中的id，把它的name找出来

        let tempObj = this.data.radioItems.find(item => item.id === Number(checked));
        let temName = tempObj.name;

        //这里重点，把选中的参数存到上一个界面中
        var pages = getCurrentPages();
        var prevPage = pages[pages.length - 2];  //上一个页面

        //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
        prevPage.setData({
            species_id: checked, //这个参数是父界面的一个参数
            species_name: temName, //这个参数是父界面的一个参数
        })

       // this.setData(changed) //结合了一个单选组件，可以单独选中某一个品种，图中有蓝点的标识那里

        wx.navigateBack();   //返回上一个页面

父界面展示的时候直接如下就可以得到子界面设置的参数值了： {{species_name}}

 <view class="tl-h80 clearfix">
            <view class="weui-cell-hd pull-left tl-666">宠物品种</view>
            <!--<picker class="pull-left" style="width: calc(100% - 170rpx);" bindchange="bindPetKindChange"  value="{{petIndex}}" range-key="name"  range="{{petKindList}}">
                {{petKindList[petIndex].name}}
            </picker>-->
            <view bindtap="goCheck" >
                <!--<input class="h80" placeholder="请选择" value="{{species_name}}"/> -->
<input class="h80" placeholder="请选择" value="{{species_name}}" disabled='disabled'/>
            </view>
            <view class="weui-cell__ft_in-access2"></view>
        </view>