uniapp 各种兼容，优化等问题记录

• 对于ios自带的上下拉-进行禁用-橡皮筋回弹

1.pages.json中加入如下配置
{
        "path": "pages/my/my",
        "style": {
            "navigationBarTitleText": "个人中心",
            "disableScroll": true,//禁止滑动
            "enablePullDownRefresh": false,
            "navigationBarTextStyle": "white",
            "navigationStyle": "custom",
            "navigationBarBackgroundColor": "#4095E5"
        }
    }
2.页面中如果需要滚动 加入scroll-view组件
<scroll-view scroll-y="true" class="scontent" :enhanced="true" :bounces="false" :show-scrollbar="false">
</scroll-view>
<style>
    .content{
        //可视高度，需要在多大的盒子中进行滑动
        height: 100vh;
        width: 100%;//视情况设置
    }
</style>

• rich-text富文本图片之间有空白-富文本全是图片并且需要去掉空白处理

1.font-size: 0;时文字内容会全部不显示
<rich-text :nodes="data.content" :style="flag?'font-size: 0;':''"></rich-text>
2.使用标识font; 选择去不去除空白
if (res.content.indexOf('font;') != -1) {
    this.flag = true;//去除图片空白，此时所有文字不会显示
    //res.content = res.content.replace("font;", "");//标识去除，不显示文字，所以不需要替换去除
}
this.data = res

• 去除button所有默认样式

.buttonClear {
        color: #333;
        text-align: center;
        border: none;
        border-radius: 0;
        background-color: transparent;
        display: flex;
        padding: 0px;
        magin: 0px;
    }

    .buttonClear::after {
        border: none;
    }

• 点击放大

.carpush:active {
        transform: scale(1.8);
    }

• 弹跳

<uni-grid :column="5" :show-border="false" :square="false">
    <uni-grid-item v-for="(item ,index) in classList" :index="index" :key="index">
        <view class="grid-item-box" @click="clickClass(item.id)">
            <image class="image" :src="item.icon" mode="aspectFill" />
            <text class="text">{{item.title}}</text>
            <!-- <view v-if="item.badge" class="grid-dot">
            <uni-badge :text="item.badge" :type="item.type" />
        </view> -->
        </view>
    </uni-grid-item>
</uni-grid>


<style lang="scss">
.image {
    width: 57px;
    height: 57px;
    position: relative;
    animation: myfirst 2s;
    /* Safari and Chrome */
    -webkit-animation: myfirst 2s;
}
@keyframes myfirst {
    10% {
        left: 0px;
        top: 0px;
    }

    40% {
        left: 0px;
        top: -20px;
    }

    45% {
        left: 0px;
        top: 0px;
    }

    65% {
        left: 0px;
        top: -8px;
    }

    70% {
        left: 0px;
        top: 0px;
    }

    80% {
        left: 0px;
        top: -2px;
    }

    90% {
        left: 0px;
        top: 0px;
    }
}

@-webkit-keyframes myfirst {
    10% {
        left: 0px;
        top: 0px;
    }

    40% {
        left: 0px;
        top: -20px;
    }

    45% {
        left: 0px;
        top: 0px;
    }

    65% {
        left: 0px;
        top: -8px;
    }

    70% {
        left: 0px;
        top: 0px;
    }

    80% {
        left: 0px;
        top: -2px;
    }

    90% {
        left: 0px;
        top: 0px;
    }
}
</style>