使用#ifdef、#ifndef方法适配微信、支付宝、抖音
js vue 使用#ifdef、#ifndef方法适配微信、支付宝、抖音
·
#ifdef MP-WEIXIN<标识> 标识适配不同端
#ifdef MP-WEIXIN //适配微信端
<!-- #ifdef MP-WEIXIN -->
<view class="navigation-bar" :style="{ top: statusTop }">
<text class="server-title">我的</text>
</view>
<!-- #endif -->
如果想要自定义导航栏,则需要在pages.json中配置属性transparentTitle设置为auto和navigationStyle设置为custom
"style": {
"navigationBarTitleText": "客服中心",
// #ifndef MP-TOUTIAO
"transparentTitle":"auto",
"navigationStyle": "custom",
// #endif
//支付宝禁止下拉
"allowsBounceVertical":"NO",
//微信禁止下拉
"enablePullDownRefresh": false
// "disableScroll": true
}
抖音自定义导航栏比较严重,所以需要适配才行,这里使用// #ifndef MP-TOUTIAO即可,其意思就是除抖音之外的
#ifndef是if not define的简写
{
"path": "pages/my/index",
"style": {
"navigationBarTitleText": "我的",
// #ifndef MP-TOUTIAO
"transparentTitle":"auto",
"navigationStyle": "custom",
// #endif
//支付宝禁止下拉
"allowsBounceVertical":"NO",
//微信禁止下拉
"enablePullDownRefresh": false,
"disableScroll": true
}
},
// #endif 就是结尾标识,相当于闭合标签
完整代码示例
//适配抖音、头条
<!-- #ifdef MP-TOUTIAO -->
<div class="header items-center" style="margin-top: 20%;">
<!-- #endif -->
//适配微信
<!-- #ifdef MP-WEIXIN -->
<div class="header items-center" style="margin-top: 20%;">
<!-- #endif -->
//适配支付宝
<!-- #ifdef MP-ALIPAY -->
<div class="header items-center" style="margin-top: 20%;">
<!-- #endif -->
//适配除了抖音、头条之外的
<!-- #ifndef MP-TOUTIAO -->
<div class="header items-center" style="margin-top: 20%;">
<!-- #endif -->
更多推荐
已为社区贡献2条内容
所有评论(0)