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

这篇具有很好参考价值的文章主要介绍了【uniapp项目路由,配置,修改uni ui默认样式,小程序端不生效问题】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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样式的时候会有一些问题
uni-ui 样式修改,uniapp,uni-app,前端,小程序

解决方案

去除after的border

button::after {
			border: none;
		}

uni-ui 样式修改,uniapp,uni-app,前端,小程序

3.路由跳转失败问题:

使用uni.navicateTo()

问题

  • 路由的路径页面需要在package.json注册
  • 路由的路径页面不能注册在底部导航,也就是tabBar中,注册在tabBar中的页面,必须使用uni.switchTab
  • 检查路径是否正确 pages前面必须有/
    uni-ui 样式修改,uniapp,uni-app,前端,小程序

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

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

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

解决方案

在需要修改ui样式的组件中添加如下
uni-ui 样式修改,uniapp,uni-app,前端,小程序

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

使用css background url添加背景图时,运行在微信开发者工具上会提示使用标签image或其他解决方式
小程序不支持以下:
uni-ui 样式修改,uniapp,uni-app,前端,小程序

解决方案

uni-ui 样式修改,uniapp,uni-app,前端,小程序文章来源地址https://www.toymoban.com/news/detail-788550.html

到了这里,关于【uniapp项目路由,配置,修改uni ui默认样式,小程序端不生效问题】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3项目使用样式穿透修改elementUI默认样式

    在css单文件中,我们在style标签中写组件的样式,可以看到,一般style标签都会带上一个scoped属性,这样可以实现及时不同组件选择器一样,但是样式互不干扰。 看一个例子,我们在两个组件中都定义一个 hello-world-box 类,在对应的scope标签中设置不同的样式。 可以看到,vu

    2023年04月09日
    浏览(41)
  • 【uniapp】小程序开发:2 安装uni-ui组件库、使用pinia状态管理、自定义http请求

    1、安装 2、配置组件自动导入 使用 npm 安装好 uni-ui 之后,需要配置 easycom 规则,让 npm 安装的组件支持 easycom 打开项目根目录下的 pages.json 并添加 easycom 节点: 3、安装插件,实现uni-ui组件的类型提示 安装完成后,在 tsconfig.json 中增加配置项 4、测试使用 随便复制一个组件在

    2024年02月08日
    浏览(58)
  • 【可视化开发】echarts配置项——修改tooltip默认样式

    在可视化开发中我们通常会遇到修改tooltip样式问题,下面分享给大家代码片段和最终呈现效果 配置项 trigger 触发类型 axis:坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。 item:数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 none:什么

    2023年04月09日
    浏览(73)
  • uniapp踩坑之项目:uniapp修改弹窗组件样式

    在components文件夹里创建zz-prompt文件夹,再在下面创建index.vue 在单页面home.vue里引入通知弹窗组件 上一篇文章, git拉取失败,没有权限:Please make sure you have the correct access rights and the repository exist_git pull 没权限_意初的博客-CSDN博客 git拉取失败,没有权限:Please make sure you hav

    2024年02月12日
    浏览(41)
  • uniapp 给自定义组件或uview等ui组件加class样式或修改样式在微信小程序不生效的情况

    首先不论是自定义组件还是ui组件,本质上的原因都是微信小程序默认的组件隔离策略导致的。 微信小程序组件隔离文档参考 1.在原有class上修改样式 比如我在uview radio 单选组件的原有class(.u-radio ) ,修改样式出现不生效的情况 解决: 加上 ::v-deep 即可 2.增加class 比如我在

    2024年02月02日
    浏览(68)
  • 【uni-app教程】四、UniAPP 路由配置及页面跳转

    uni-app 页面路由为框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在 app.json 中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同,如仍希望采用 Vue Router 方式管理路由,可在插件市场搜索 Vue-Router。 uni-app 有两种页面路由跳转

    2024年01月16日
    浏览(73)
  • 动态路由协议 - OSPF 基本配置 详解 (反掩码,三张表,Cost默认值修改 )

    目录 预备工作   : 基础配置  :        先启动 OSPF 的进程  :        创建区域 :         宣告  :    查看三张表  邻居表  :  数据库表 :   路由表 :  以下示拓扑为 OSPF 示范  :                                  第一步确定有几个广播域, 

    2024年01月20日
    浏览(58)
  • uniapp+vue3+vite+ts搭建项目引入uni-ui和uviewPlus组件库

    一、创建项目架构 首先使用官方提供的脚手架创建一个项目 在这里插入代码片 ,这里我创建的 vue3 + vite + ts 的项目: (如命令行创建失败,请直接访问 gitee下载模板) 二、下载依赖 启动 三、下载安装包 引入uni-ui src/package.json 文件配置easycom模式 引入uview-plus main.ts配置 u

    2024年02月13日
    浏览(59)
  • 【微信小程序开发】宠物预约医疗项目实战-环境配置与Vant UI集成

    第一章 宠物预约医疗项目实战-环境配置与Vant UI集成 Vant是一个轻量、可靠的移动端组件库,于2017年开源。目前Vant官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。 微信小程序版本的Vant组件库是Vant Weapp,其官方文档是

    2024年02月07日
    浏览(47)
  • 修改第三方组件默认样式

    修改el-input的样式: 查看DOM结构: 原本使用 /deep/ 但是可能不兼容 使用 :deep 将 input 框背景色改为蓝色

    2024年02月13日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包