uniApp 详情页标题渐显效果（APP)

最新推荐文章于 2024-09-23 11:33:30 发布
最新推荐文章于 2024-09-23 11:33:30 发布
阅读量531 收藏 1
点赞数
文章标签： 前端 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37125233/article/details/124712306
版权

导航栏 标题更新 uni.setNavigationBarTitle 详情页 滚动事件
关键词由CSDN通过智能技术生成

发现一个有意思的，分享一下，通过滚动详情页文字内容，详情标题添加至导航栏标题，看图：

首先在 pages.json页面添加

在对应详情页中通过onLoad通过uni.setNavigationBarTitle更改导航栏文字内容，以匹配对应详情

有问题欢迎大家一起沟通交流，一起进步

咕谷古顾故
关注
8.1 详情页页面展示｜uni-app 项目实战（详情页功能模块）｜uni-app & uniCloud 从零入门开发《IT技术资讯类跨端应用》项目实战
08-31
8.1_详情页页面展示｜uni-app_项目实战（详情页功能模块）｜uni-app_&_uniCloud_从零入门开发《IT技术
uniapp中，设置图标字体为渐变色
weixin_43848571的博客
01-15 2462
<text class="nz-iconfont nz-iconhouse fund-icon"></text> // 要设置渐变色的图标，fund-icon自定义类名 .fund-icon { font-size: 41rpx * 2; // 控制图标大小 margin-top: 105rpx * 2; margin-bottom: 55rpx * 2; display: inline-block; -webkit-ba
学习uniapp 标题内容（文字、图片）水平垂直居中
最新发布
c1728733689的博客
09-23 751
但是有时候标题栏中往往不止只有中间的文字，当标题栏加入了其他的元素后，文字在水平方向就不一定居中了，那该怎么办呢！2. 第二种解决方法 ：可以考虑让父元素变成 flex 容器，使用水平垂直居中方法让子元素在父元素中居中。我的解决方法是将标题栏分为三个盒子 左右两边的盒子宽度相等 标题放在中间的盒子中 这样子就能居中了。1.第一种解决方法 ：可以考虑让父元素变成 flex 容器，子元素使用margin自适应布局。文字垂直方向的居中就需让要盒子在垂直方向上居中。（2）.标题栏中有其他元素，标题文字不居中。
uni小程序通过滑动使头部导航栏实现渐变效果
VastWu的博客
01-26 3379
uni小程序通过滑动使头部导航栏实现渐变效果 通过自定义导航栏实现： <template> <view :style="{'padding-top':h+'px'}"> <view class="status_bar" :style="{height:h+'px','background-color':'#39dc1c',opacity:opacity}"> <!-- 这里是自定义状态栏 --> <text class="status
uni-app文章详情-富文本展示 优雅展示代码块
沐雪大神
02-15 3329
在uni-app开发中，开发一个资讯详情页面，详情里包含图片和代码块。这时候用简单的rich-text控件已经不够用了。用官方demo里的html-parser.js也无法很好的展示代码区域。这个时候就要使用官方提供的插件来解决。 官方的这个插件有很多问题。需要使用第3方修复的版本：https://ext.dcloud.net.cn/plugin?id=1279 首先：下载插件 ：https:...
UNI-APP 自定义头部 滚动页面渐显标题
qq_42717015的博客
09-13 301
UNI-APP 自定义头部 滚动页面渐显标题！UNI-APP 自定义头部 滚动页面渐显标题！ UNI-APP 自定义头部 滚动页面渐显标题！UNI-APP 自定义头部 滚动页面渐显标题！ UNI-APP 自定义头部 滚动页面渐显标题！UNI-APP 自定义头部 滚动页面渐显标题！ UNI-APP 自定义头部 滚动页面渐显标题！UNI-APP 自定义头部 滚动页面渐显标题！ UNI-APP 自定义头部 滚动页面渐显标题！UNI-APP 自定义头部 滚动页面渐显标题！
uniApp 新闻详情页语音播报，app端、H5端百度语音合成、播报实例
10-28
在本项目中，我们主要探讨如何使用uniApp与百度语音合成技术实现新闻详情页的语音播报功能，同时兼容app端和H5端。uniApp是一个跨平台的开发框架，允许开发者编写一次代码，就能在iOS、Android以及各种浏览器上运行...
uniapp 文章详情页，富文本解析，详情页跳转，包括CSS样式设置
qq_37455326的博客
01-12 671
【代码】uniapp 文章详情页，富文本解析，详情页跳转。
uniapp详情页以及设置页间的数据更新显示$on$emit方式
u012504951的博客
03-17 1155
用用户详情页面或者群聊详情页的时候，经常有页面信息需要做修改，例如修改用户昵称或者标签。 步骤 1、点击标签进入设置标签页面。 2、设置完标签后，与后台接口交互。 3、返回详情页。 此时一般的在线处理方式，是返回详情页时请求接口重新刷新页面数据。 现在使用on的方式就可以改为这样1、进入详情页后，onload时候监听一个全局函数‘updatetimeTag’。2、进入标签设置后，更新后台接口，同过on的方式就可以改为这样 1、进入详情页后，onload时候监听一个全局函数‘updatetimeTag’。 2
uniapp开发的多端影视APP，对接的苹果CMS
09-10
《基于uniapp的多端影视APP开发：与苹果10CMS的深度对接》 在现代互联网技术中，跨平台开发工具扮演着至关重要的角色。uniapp作为一种新兴的框架，凭借其强大的多端适配能力，深受开发者喜爱。本文将深入探讨如何...
uni-app时间选择器并选择时间段
热门推荐
yyxhzdm的博客
08-03 1万+
效果图： 1.在script中引用自定义组件：mx-datepicker.vue import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue"; 2.注册组件： components: { MxDatePicker }, 3.新建时间选择页面代码： <template> <view> <view class="t...
uniapp 微信小程序 文章详情页顶部标题动态对应文章列表页返回的标题
maoge_666的博客
07-20 384
uniapp 微信小程序 文章详情页顶部标题动态对应文章列表页返回的标题
uni-app渲染新闻列表，跳转详情页
祈澈菇凉
12-30 7153
1：新建两个vue界面，list列表页，details详情页 2：打开pages.json，配置新增页面的路径等信息 { "path": "pages/main/list", "style": { "navigationBarTitleText": "新闻列表" } }, { ...
uniapp点击进入详情页（加上搜索栏，以及滑动删除）
温温的博客
08-04 1580
实现效果有个bug，从下往上删除会出现报错，以及下面几个删除出现问题，应该是splice的问题。 在使用本地数据的情况下
uni-app实战之社区交友APP（8）搜索列表页和文章详情页开发
CUFEECR的博客
02-02 1198
不同页面的搜索类型不同，通过标识加以区别，搜索页完善搜索类型和占位符；根据不同的搜索类型搜索不同的内容，通过页面传递的搜索类型来实现。帖子详情页配置右上角的菜单按钮，入口是公共列表；使公共列表组件兼容到帖子详情页头部，实现复用，给评论和分享按钮添加点击事件；在详情页实现关注和顶踩功能；给帖子数据增加content和images字段，显示在父组件中；评论输入框参考聊天页输入框，将输入框抽离成组件；评论列表组件使用官方模板；分享功能使用uni-popup组件实现，从底部弹出，封装为组件，实现多种分享接口。
uni-app 顶部导航栏颜色渐变
m0_62778558的博客
07-30 1047
页面上滑时实现顶部导航栏颜色渐变
uniapp小程序让页面滚动到底部_小程序.文章页面
weixin_26985923的博客
12-30 629
我来构建第二页面：文章页面。文章页面主体部分由两部分构成，上半部分是一个轮播图，下半部分是文章列表。轮播图目前来说已经成为各大电商网站首页的标配元素.轮播图每隔几秒钟图片会自动更换一张。在小程序中，我们不需要自己编写代码来实现这样的轮播图效果，小程序已经提供了一个现成的组件——swiper。整个页面,直接构建一个.巴适现在默认是welcome,得跳转.咋办.你需要一点点的hello wo...
uni-app 渐变
weixin_45932157的博客
03-26 2297
基础线性渐变，从上到下 background: linear-gradient(blue, pink); 改变渐变方向 background: linear-gradient(to right, blue, pink); 对角线渐变 background: linear-gradient(to bottom right, blue, pink); 设置渐变角度 background: linear-gradient(70deg, blue, pink); ...
uniapp云开发之搜索页面详情模板
新钢小猪编程
10-14 486
云开发的搜索页面 注意：将组件放在文件components中，无需引用。 进入搜索页面 以上就是简单的搜索页面的模板，如有不足指出，请留言。
uniapp商品详情页
10-10
在UniApp中开发商品详情页可以按照以下步骤进行： 1. 创建商品详情页组件：在UniApp项目中创建一个新的Vue组件，命名为"ProductDetail"或类似的名称。 2. 设计页面布局：在该组件中，可以使用Vue的模板语法编写商品...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值