【uniapp项目路由,配置,修改uni ui默认样式,小程序端不生效问题】

2023-10-30

1.对不同平台进行不同配置或样式:

  • 对不同端的css样式不一样
    使用
    #ifdef
    #endif
    包裹
    (其中MP表示小程序端,表仅在小程序端是那个样式)
// #ifdef APP-PLUS
		margin-top: 88rpx;
		// #endif
		// #ifdef H5
		margin-top: 0;
		// #endif
		// #ifdef MP
		margin-top: 88rpx;
		// #endif
  • 对不同端package.json中导航配置不同
    1.使用 #ifdef #endif 包裹
 {
			"path": "pages/mine/addAgent/uploadInfo",
			"style": {
				"navigationBarTitleText": "完善信息",
				//#ifdef H5  
				"titleNView": false,
				//#endif
				"enablePullDownRefresh": false
			}
	}

2.使用自带配置

{
		"path": "",
		"style": {
			"navigationBarTitleText": "",
			"h5": {
				"titleNView": false
			},
			"app-plus":{
			  "titleNView":false
			}
			"enablePullDownRefresh": false
	}
	

2.unipp中button元素:

button按钮中样式自带after
当写border样式的时候会有一些问题
在这里插入图片描述

解决方案

去除after的border

button::after {
			border: none;
		}

在这里插入图片描述

3.路由跳转失败问题:

使用uni.navicateTo()

问题

  • 路由的路径页面需要在package.json注册
  • 路由的路径页面不能注册在底部导航,也就是tabBar中,注册在tabBar中的页面,必须使用uni.switchTab
  • 检查路径是否正确 pages前面必须有/
    在这里插入图片描述

4.修改uniapp提供的ui库的默认样式

尝试了很多方法发现对于小程序端不生效
包括(

  • 添加优先级 多层级类及!important
  • 使用/deep/或者::v-deep
  • )都无效

解决方案

在需要修改ui样式的组件中添加如下
在这里插入图片描述

5.小程序端不支持背景图

使用css background url添加背景图时,运行在微信开发者工具上会提示使用标签image或其他解决方式
小程序不支持以下:
在这里插入图片描述

解决方案

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【uniapp项目路由,配置,修改uni ui默认样式,小程序端不生效问题】 的相关文章

随机推荐

  • JavaScript中的iterable

    遍历Array可以采用下标循环 遍历Map和Set就无法使用下标 为了统一集合类型 ES6标准引入了新的iterable类型 Array Map和Set都属于iterable类型 具有iterable类型的集合可以通过新的for of循环来
  • Laravel初探——安装

    安装Composer 1 curl sS https getcomposer org installer php 2 mv composer phar usr local bin composer 3 composer install 安装
  • Java之美[从菜鸟到高手演变]之设计模式二

    在阅读过程中有任何问题 请及时联系 egg 邮箱 xtfggef gmail com 微博 http weibo com xtfggef 如有转载 请说明出处 http blog csdn net zhangerqing 我们接着讨论设计模
  • 变量的声明和定义

    1 声明和定义的区别 变量声明规定了变量的类型和名字 而定义是在声明的基础上还开辟了存储空间 可能还会为变量初始化一个初始值 2 c 为什么要将声明和定义分开 c 支持分离式编译机制 允许将程序分割为若干个文件 每个文件可被独立编译 而为了
  • 华为云云耀云服务器L实例评测

    目录 引出 起因 si因 解决报错 诶嘿 连上了 不出意外 就出意外了 打开数据库 what 找华为云求助 教训 备份 教训 密码 解决 1 改密码 2 新建一个MySQL 密码设置复杂一点 3 开启 binlog备份 MySQL的binl
  • Java二维数组静态以及动态初始化方法

    import java util Random public class test2 public static void main String args 二维数组静态初始化 int arr 1 2 3 4 5 6 7 8 9 Syste
  • java8 函数式接口与 Lambda 表达式

    函数式接口与 Lambda 表达式 1 函数式接口 举例复习接口的匿名实现 函数式接口 2 Lambda表达式 什么是Lambda Lambda的几种编写规则解释示例 Lambda 的方法引用与构造器引用 方法引用的解释与编写 方法引用示例
  • Winform实现ComboBox模糊查询

    1 新增项目 using System using System Collections Generic using System ComponentModel using System Data using System Drawing
  • 【Web3 系列开发教程——创建你的第一个 NFT(7)】创建一个 NFT DApp,给你的 NFT 赋予属性,例如图片

    在本文中 你将构建一个 NFT 铸币机 并学习如何通过使用 Metamask 和 Web3 工具将你的智能合约连接到 React 前端 来创建一个NFT dApp 我认为 对于具备 Web2 开发背景的开发者来说 最大的挑战之一是弄清楚如何
  • 故障诊断专家系统研究之五-----推理机制及可信度算法

    推理机制及可信度算法 在第三章和第四章中讨论了如何表示燃气轮机专家的知识以及如何把这些知识存储到知识库之中 即关于知识表示和知识库的问题 而故障诊断专家系统的另一个核心组件就是基于知识的诊断推理机 本章在前两章讨论的知识表示和知识库的基础之
  • 计算机专业大学生如何规划大学四年?

    首先必须学好计算机专业四大核心课程 数据结构 计算机网络 计算机组成原理 计算机操作系统 在此之前呢 建议学习一门面向过程和一门面向对象的语言 对我们进一步学习计算机大有裨益 比如C语言程序设计 Java程序设计 文末有福利 一 计算机专业
  • Mybatis中的StatementType

    原文 http luoyu ds iteye com blog 1517607 要实现动态传入表名 列名 需要做如下修改 添加属性statementType STATEMENT 同时sql里的属有变量取值都改成 xxxx 而不是 xxx
  • 雅可比(Jacobi)计算特征值和特征向量

    雅可比迭代法法 在图形图像中很多地方用到求矩阵的特征值和特征向量 比如主成分分析 OBB包围盒等 编程时一般都是用数值分析的方法来计算 这里介绍一下雅可比迭代法求解特征值和特征向量 雅可比迭代法的原理 网上资料很多 详细可见参考资料1 这里
  • 最小二乘法(OLS)python 实践

    参考链接 1 基本原理 https zhuanlan zhihu com p 149280941 2 python实现 https zhuanlan zhihu com p 22692029 实现结果 线性回归 coding utf 8 简
  • 2022 数学建模C题 高教社杯 含半成品论文 部分代码 全部数学模型 和全套思路

    2022 数学建模国赛B题 高教社杯 含半成品论文 部分代码 全部数学模型 和全套思路 定时更新 全部内容见 https mianbaoduo com o bread mbd Y5WUkpps 注 题目阅读后主要告诉我们的内容见标蓝的关键词
  • oracle 11g安装教程完整版

    64位WIN7 oracle11g plsql安装 上部转自Oracle 11g R2 for Win7旗舰版 64位 的安装步骤 1 下载Oracle 11g R2 for Windows的版本 下载地址 http www oracle
  • MemTest64内存测试

    MemTest64是一款测试电脑内存稳定性的测试 软件同时支持32位64位运行环境 界面如下 一 使用步骤 设定使用模式 点击开始 二 各个设置项说明 测试内存 可打开任务管理器查看内存和CPU使用情况 选择合适内存值 无限制运行 建议慎用
  • Spring Boot的底层原理

    一 Spring Boot简介 1 什么是Spring Boot Spring Boot是由Pivotal团队提供的框架 其设计目的是用来简化新Spring应用的初始搭建以及开发过程 该框架使用了特定的方式 继承starter 约定优先于配
  • Java基础:Stream流常用方法

    获取Stream流的方式 java util stream Stream 是Java 8新加入的流接口 并不是一个函数式接口 获取一个流非常简单 有以下几种常用的方式 所有 Collection 集合都可通过 stream 默认方法获取流
  • 【uniapp项目路由,配置,修改uni ui默认样式,小程序端不生效问题】

    1 对不同平台进行不同配置或样式 对不同端的css样式不一样 使用 ifdef endif 包裹 其中MP表示小程序端 表仅在小程序端是那个样式 ifdef APP PLUS margin top 88rpx endif ifdef H5