Page页面结构如下

<form @submit="formSubmit">
    <view class="cu-form-group">
      <view class="title">打开通知</view>
      <switch  @change="notice_change" :class="swith_class" :checked="userSettings.orderNoticeOne?true:false"></switch>
    </view>
</form>

在Ipad中会错位 不管是 type为 switch 还是checkbox 都无法修复该问题

采取的补救措施是在该环境下不显示其他图标

css样式如下

.switch-diy-none::after {
	content:" ";
}
.switch-diy-none::before {
	content:" ";
}

添加js函数判断是否为Ipad环境

is_ipad() {
    let model = uni.getSystemInfoSync().model.toLowerCase();
    if (uni.getSystemInfoSync().platform == 'ios' && model.indexOf("ipad") != -1) {
        return true;
    } else {
        return false;
    }
}

初始化设置兼容样式

data() {
    return {
        userSettings: this.g.userSettings,
        swith_class: ''
    }
},
onLoad: function(e) {
    if (this.userSettings.orderNoticeOne) {
        this.swith_class = 'checked';
    }
    if (fun.is_ipad()) {
        this.swith_class = this.swith_class + ' switch-diy-none';
    }
}