微信小程序实现动态设置页面标题的方法【附源码下载】

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

1、效果展示

2、关键代码

① WXML文件

<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: '我们 - 动态设置页面标题',
  })
 }
})

③ WXSS文件

button{
 margin-top:10px;
}

3、完整实例代码点击此处本站下载。

希望本文所述对大家微信小程序开发有所帮助。

赞 (0)

相关推荐

  • 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例

    微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例

    把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣? 果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看. 先上gif: 再上几张图: 1.视频播放器 2.选择弹幕颜色 3.弹幕来了... 1.视频播放器 微信已经封装的非常好.我这里只用了很简单的几个属性 由于以前没做过弹幕,看到danmu-list就激动了.而且只需要将弹幕内容加入集合即可. 弹幕列表的元素: { text: '第 1s 出现的红色弹幕',//文本 color: '#ff0000',//颜色 time: 1//

  • 微信小程序 按钮滑动的实现方法

    微信小程序 按钮滑动的实现方法

    微信小程序 按钮滑动的实现方法 一.先看东西 滑动前 滑动后 二.再上代码 index.wxml <view class="content"> <view class="sliderContent"> <input placeholder="验证码" placeholder-class="input-placeholder" disabled="{{disabled}}" /&

  • 微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】

    微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】

    本文实例讲述了微信小程序实现点击按钮修改字体颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="color:{{color}}">我是view标签</view> <view style="display:flex;"> <block wx:for="{{colorArray}}" wx:k

  • 微信小程序 input输入及动态设置按钮的实现

    微信小程序 input输入及动态设置按钮的实现 [需求]实现当手机号已填写和协议已勾选时,"立即登录"按钮变亮,按钮可点击:若有一个不满足,按钮置灰,不可点击:实现获取短信验证码,倒计时提示操作:对不满足要求内容进行toast弹窗提示. <view class="container"> <!--手机号--> <view class="section"> <text class="txt"

  • 微信小程序实现多个按钮toggle功能的实例

    微信小程序实现多个按钮toggle功能的实例

    微信小程序实现多个按钮toggle功能的实例 如下图所示,实现该按钮toggle功能. 百度上很多都是只设置一个按钮的toggle,所以我现在来稍微总结下:多个按钮如何实现自身的toggle功能. 原理: 1,列表展示的时候,我们会用wx:for 来循环数据,那么我们就会得到相应的当前的第几个数据(即 wx:key="index") 2.在每一个数据里面添加一个toggle的属性,toggle=false  则不展示, 3.设置一个点击方法,获取当前按钮所在的是第几个数据,然后将相应的

  • 微信小程序 实现列表项滑动显示删除按钮的功能

    微信小程序 实现列表项滑动显示删除按钮的功能 微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位. wxml: <view class="container"> <view class="record-box" data-datetime="{{record.

  • 微信小程序组件 contact-button（客服会话按钮）详解及实例代码

    微信小程序组件 contact-button contact-button 客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话. 属性名 类型 默认值 说明 size Number 18 会话按钮大小,有效值 18-27,单位:px type String default-dark 会话按钮的样式类型,有效值 default-dark, default-light session-from String   用户从该按钮进入会话时,开发者将收到带上本参数的事件推送.本

  • 微信小程序 配置顶部导航条标题颜色的实现方法

    微信小程序 配置顶部导航条标题颜色的实现方法

    微信小程序 配置顶部导航条标题颜色的实现方法 关于小程序导航顶部配置都写在.json文件中. { "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "bac

  • 微信小程序中吸底按钮适配iPhone X方案

    微信小程序中吸底按钮适配iPhone X方案

    随着第二三批iPhone X的陆续到货,身边的土豪们纷纷用了起来,因为iPhone X的齐刘海导致的适配问题很多,所以这群土豪更沉浸在各种找bug中,不出所料,豌豆公主小程序在一些地方也出现了一丢丢体验不好的地方,主要是商品详情页和购物车的吸底按钮栏,会与 Home Indicator 横条重叠,这样在点击下方按钮时很容易误触发手势操作,如下图: 截图来自网络,侵删 是bug就得修,是体验问题就得优化,于是立马搞了一台iPhone X开始研究. 网页端的适配还好,有 viewport meta

  • 微信小程序实现动态设置页面标题的方法【附源码下载】

    微信小程序实现动态设置页面标题的方法【附源码下载】

    本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件 <button bindtap="setBiaoTi1">标题1</button> <button bindtap="setBiaoTi2">标题2</button> <button bindtap="setBiaoTi3">标题3</button&g

  • 微信小程序使用radio显示单选项功能【附源码下载】

    本文实例讲述了微信小程序使用radio显示单选项功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <radio-group bindchange="radiogroupBindchange"> <radio value="radio1">radio1</radio> <radio value="radio2">radio2</radio> &l

  • 微信小程序之自定义组件的实现代码（附源码）

    微信小程序之自定义组件的实现代码（附源码）

    最近在项目开发中,遇到好多雷同的页面样式,就想着可以将常用的功能模块封装成组件,方便在项目中使用和修改,下面就参照微信小程序的文档分步骤写一个微信小程序的组件. 附上效果图: step1:创建文件并申明 与创建微信小程序的页面一样,一个自定义组件也需要json,wxml,wxss,js四个文件. 在项目根目录中创建文件夹,取名为:component,在该目录下继续创建文件夹successModal. 可以在开发工具中右键创建,选择component,默认自动会创建四个文件.如图: 在succes

  • 微信小程序 表单Form实例详解（附源码）

    微信小程序 表单Form实例详解（附源码）

    微信小程序 表单Form实例 表单Form的应用很广泛,我们可以利用form设计登录注册,也可以设计一种答题问卷的形式,今天主要讲一下form的使用 form表单,将组件内输入的"switch","input","checkbox","slider","radio","picker"的值进行提交,数据的格式为:name:value,所以表单中控件都需要添加name属性,否则找不到对应控件

  • 微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法

    本文实例讲述了微信小程序实现动态设置placeholder提示文字及按钮选中取消状态的方法.分享给大家供大家参考,具体如下: 效果图展示    通过绑定点击事件placeholder方法,获取data-num的值,通过js判断num等于几,然后通过class="{{num==X?'active':''}}"表达式判断哪个标签处于选中状态(即蓝底白字): js通过获取data-key,设置input输入框中placeholder的动态值 wxml里的内容: <view class=

  • 微信小程序实现两个页面传值的方法分析

    本文实例讲述了微信小程序实现两个页面传值的方法.分享给大家供大家参考,具体如下: 需求:发送页面通过url传值,接收页面获取值. 发送页面的js var nowid='10'; wx.navigateTo({ url: '../index/index?id='+nowid, }) 或者发送页面用navigate 组件: <navigate url="xxx?id=10"></navigate > 如果id是page里面data的数据.是动态的,那么可以写成: &

  • 微信小程序 JS动态修改样式的实现方法

    微信小程序 JS动态修改样式的实现方法

    前言 本文主要介绍了关于微信小程序 JS动态修改样式的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 先写一个不怎么好看的demo,通过点击事件来控制view的元素属性,把背景改变成蓝色. 是这样的效果: 代码如下: 上一份小代码 index.wxml <view > <view class="cont" style="background:{{background}};">属性改变</view> <

  • 微信小程序 button样式设置为图片的方法

    微信小程序 button样式设置为图片的方法

    下面通过多种方法给大家介绍微信小程序 button 的样式设置为图片,具体内容如下所示: 方法一:button 与 image 重叠 将button设为 opacity:0 然后定位放在那副图片的上边. 方法二:background-image background-image.背景图片是不支持在css中被引用资源的,但可以使用网络资源. <button open-type='share' class="share" style="background-image:ur

  • Hook实现Android 微信、陌陌 、探探位置模拟（附源码下载）

    Hook实现Android 微信、陌陌 、探探位置模拟（附源码下载）

    Hook实现Android 微信.陌陌 .探探位置模拟 最近需要对微信,陌陌等程序进行位置模拟 实现世界各地发朋友圈,搜索附近人的功能,本着站在巨人肩膀上的原则 爱网上搜索一番. 也找到一些 代码和文章,但是代码大都雷同而且都有一个弊端 比如说 微信 对目标函数实现hook之后第一次打开微信 第一次定位是可以改变的 但是 我如果想更换地址的话 就需要重启手机了,重新加载hook了,试了很多次都是这样满足不了需求. 为了改进这个地方我们从gps定义的源代码流程开始看寻找hook系统函数的突破口 我

  • ASP.NET动态设置页面标题的方法详解

    ASP.NET为我们提供了一个控件类:System.Web.UI.HtmlControls.HtmlGenericControl.它可以实现HTML的元素的一个实例,比如在.cs代码中控制aspx中的<td>元素(注意,它不是<ASP:TableCell>).我们知道,页面标题是被包含在<TITLE></TITLE>中的,而<TITLE>也是一个HTML的元素,所以,我们就可以利用System.Web.UI.HtmlControls.HtmlGe

随机推荐