鸡汤来咯开发学习笔记-12

1.创建interactive组件，把index.vue中的info部分进行组件化，然后index.vue再进行调用

2.创建安全区域的css组件，防止手机页面小白条遮挡detail.vue中的interactive组件

.safe-area-bottom{
  width: 100%;
  height: env(safe-area-inset-bottom);
}

在detail中引用

<view class="interactive">
            <interactive-bar></interactive-bar>
            <view class="safe-area-bottom"></view>
        </view>

3.区分interactive组件的样式在index和detail中：
在interactive组件中，加入script方法

defineProps({
        type:Number,
        default:0
    })

加入右边的分享按钮

 <view class="item" v-if="type==1">
                    <uni-icons type="redo" size="28" color="#999"></uni-icons>
                    <text></text>
                </view>

再在detail页中，该组件的引用部分进行传值type为1

<interactive-bar :type="1"></interactive-bar>

4.运用type属性，在这两个页面中进行隐藏和显现本页面的组件￥￥如下亦是

5.interactive组件中加入评论点击框

    <view class="item" v-if="type==1">
                        <view class="input">评价一下....</view>
                    </view>

并加入css样式

    .input{
                width: 100%;
                height: 70rpx;
                background: #f7f7f7;
                display: flex;
                align-items: center;
                padding: 0 30rpx;
            }