微信小程序实现动态设置页面标题方法分享

1763 阅读 0 评论 1164 点赞

我是靠谱客的博主快乐花瓣，这篇文章主要介绍微信小程序实现动态设置页面标题方法分享，现在分享给大家，希望可以做个参考。

本文主要介绍了微信小程序实现动态设置页面标题的方法,涉及微信小程序button组件事件绑定及页面元素属性动态设置相关实现技巧,并附带完整源码供读者下载参考,需要的朋友可以参考下，希望能帮助到大家。

本文实例讲述了微信小程序实现动态设置页面标题的方法。分享给大家供大家参考，具体如下：

1、效果展示

2、关键代码

① WXML文件

复制代码<button bindtap="setBiaoTi1">标题1</button>
<button bindtap="setBiaoTi2">标题2</button>
<button bindtap="setBiaoTi3">标题3</button>
<button bindtap="back">还原</button>1
2
3
4
<button bindtap="setBiaoTi1">标题1</button>
<button bindtap="setBiaoTi2">标题2</button>
<button bindtap="setBiaoTi3">标题3</button>
<button bindtap="back">还原</button>
登录后复制

② JS文件

复制代码Page({
 // 设置标题为：标题1
 setBiaoTi1:function(){
  wx.setNavigationBarTitle({
   title: '标题1',
  })
 },
 // 设置标题为：标题2
 setBiaoTi2: function () {
  wx.setNavigationBarTitle({
   title: '标题2',
  })
 },
 // 设置标题为：标题3
 setBiaoTi3: function () {
  wx.setNavigationBarTitle({
   title: '标题3',
  })
 },
 // 设置标题为：动态设置页面标题
 back:function(){
  wx.setNavigationBarTitle({
   title: '靠谱客 - 动态设置页面标题',
  })
 }
})1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Page({
 // 设置标题为：标题1
 setBiaoTi1:function(){
  wx.setNavigationBarTitle({
   title: '标题1',
  })
 },
 // 设置标题为：标题2
 setBiaoTi2: function () {
  wx.setNavigationBarTitle({
   title: '标题2',
  })
 },
 // 设置标题为：标题3
 setBiaoTi3: function () {
  wx.setNavigationBarTitle({
   title: '标题3',
  })
 },
 // 设置标题为：动态设置页面标题
 back:function(){
  wx.setNavigationBarTitle({
   title: '靠谱客 - 动态设置页面标题',
  })
 }
})
登录后复制

③ WXSS文件

复制代码button{
 margin-top:10px;
}1
2
3
button{
 margin-top:10px;
}
登录后复制

最后

以上就是快乐花瓣最近收集整理的关于微信小程序实现动态设置页面标题方法分享的全部内容，更多相关微信小程序实现动态设置页面标题方法分享内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：小程序
浏览次数：1763 次浏览
发布日期：2022-10-22 15:50:02
本文链接：https://www.kaopuke.com/article/k-p-k_14_ujo_22_f4_12__7__26_4.html

微信小程序实现动态设置页面标题方法分享

最后

评论列表共有 0 条评论

发表评论取消回复

微信小程序实现动态设置页面标题方法分享

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

发表评论取消回复