使用uniapp搭建微信小程序样式问题汇集（补充中）

admin管理员组

文章数量:1655705

1. 滚动条隐藏，设置宽高0透明根本不行，在微信开发者工具上是可以隐藏，但是在苹果手机没用，用display:none;

::-webkit-scrollbar {
    display:none;
}

2. 顶部定位只有背景颜色没有内容

在商品详情页有一个吸顶，可以在页面的几个点进行跳转，滚动一定距离时显示，在安卓机上没有问题但是在苹果机上内容不显示，只有一个块在顶部吸着，不要用position：fixed；！！！用position：sticky！！！家人们sticky是真的好用啊！！！

3. 富文本图片中间有空隙

//接收富文本内容
const richText = 富文本内容
//处理富文本内容 
//正则表达式的条件要随实际情况写，比如我本来用<img style="max-width: 100%;display:block;"替换<img
//但实际上富文本中的img标签已经有了一个style="max-width:100%;"，这个时候新加的style就会在前，被覆盖掉不
//能实现效果，所以需要注意
const regex = new RegExp('style="max-width:100%;"', 'gi');
richText = richText.replace(regex, `style="max-width: 100%;display:block;"`);

4. 页面自定义位置下拉刷新，使用scroll-view!!!（多看文档：scroll-view | uni-app官网 (dcloud)）

开启自定义下拉刷新 refresher-enabled并设置当前下拉刷新状态

<scroll-view style="width: 100%;height: 100%;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100"  @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" @scrolltolower="scrolltolower"></scroll-view>

data(){
    return:{
         triggered : false,//当前下拉刷新状态 false下拉未触发 true下拉触发
         freshing : false,//是否触发下拉并发送请求了
    }
}

            // 自定义下拉刷新控件被下拉
            onPulling(e) {
                this.triggered = true;
            },
            // 自定义下拉刷新被触发
            onRefresh() {
                if (this.freshing) return;
                this.freshing = true;
                this.getHomeData() //获取首页数据
                this.getIndexCategoryList() //获取首页商品分类
                setTimeout(() => {
                    this.triggered = false;
                    this.freshing = false;
                }, 1000)
            },
            // 自定义下拉刷新被复位
            onRestore() {
                this.triggered = 'restore'; // 需要重置
            },
            // 自定义下拉刷新被中止
            onAbort() {
                this.triggered = false;
            },
            // 触底加载请求
            scrolltolower(){
                if (!this.load) {
                    //如果当前在加载中就不再发送请求，加载的时候this.load设置为true，加载完成设置为false
                    return
                } else {
                    page++
                    // 请求商品列表
                    this.getIndexGoodsList();
                }
            },

本文标签： 样式程序uniapp微信小