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

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

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、完整实例代码点击此处本站下载

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

时间: 2017-11-28

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

微信小程序 input输入框控件详解及实例(多种示例)

微信小程序 input输入框控件 今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下: <!--index.wxml--> <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添

微信小程序 input输入框详解及简单实例

微信小程序输入框input 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 微信小程序输入框input 属性名 类型 默认值 说明 value String   输入框的内容 type String text input的类型,

微信小程序基于slider组件动态修改标签透明度的方法示例

本文实例讲述了微信小程序基于slider组件动态修改标签透明度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <view class="img" style="opacity:{{imgOpacity}}"></view> <slider min="0" max="1" step="0.1" show-value value=&quo

详解微信小程序input标签正则初体验

开篇废话 在开发过程中经常遇到这样的需求:用户只能输入数字并且只保留小数点两位.虽然我们可以在提交表单的时候进行验证,但是体验不是很好.下面我主要使用了小程序input标签的bindinput方法对输入的值进行监听,然后进行正则匹配. 1. input标签 微信小程序input标签自带type=digit属性,可以调起带有小数点的数字键盘,maxlength属性可以控制我们输入字符的个数,然后我们给input标签绑定bindinput方法. <input type="digit"

微信小程序 动态绑定数据及动态事件处理

微信小程序 动态绑定数据及动态事件处理 关键核心代码 <image class="midimage" data-Type="{{item.Type}}" data-BillCode="{{item.BillCode}}" data-src="{{item.imgurl}}" src="{{item.imgurl}}" mode="scaleToFill" bindtap="

微信小程序 input表单与redio及下拉列表的使用实例

微信小程序 input表单与redio及下拉列表的使用实例 一个简单的预约类型的表单,效果 主要代码: <form bindsubmit="bindSave"> <view class="form-box"> <view class="row-wrap"> <view class="label">联系人</view> <view class="labe

微信小程序使用for循环动态渲染页面操作示例

本文实例讲述了微信小程序使用for循环动态渲染页面操作.分享给大家供大家参考,具体如下: 先来看看运行效果: 这种列表效果可以说是最常见的一种,肯定不是我们一个一个写上去,这就用到了我们这次要说的for循环渲染了 其实也很简单,我就直接上代码了 wxml部分: <view wx:for='{{languageList}}' class='hua' data-name='{{item.name}}' data-id='{{item.id}}' bindtap='select'> <text

微信小程序input框中加入小图标的实现方法

最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: emmmm 好像小程序的background-image属性并不给力啊,然后查阅相关资料后,放弃了background-image属性. 然后另辟蹊径,由于小程序中,好像只有image标签才能加载本地图片,所以考虑使用image标签来实现,大致思路就是在一个view中,左边是image,右边是in

微信小程序添加插屏广告并设置显示频率(一天一次)

插屏广告 用户触发小程序中的特定场景时,插屏广告将自动向用户展现,用户可以随时关闭插屏广告.广告触发场景由流量主自定义,广告按曝光计费(CPM). 微信小程序今年新上线了插屏广告,设置和在代码库中接入都非常方便.详细可见微信小程序官方文档. 大体的流程就是在小程序后台新建广告位,获取到广告位的adUnitId并嵌入到源代码,因为插屏广告的单页面性,在页面的onload处添加即可. let interstitialAd = null; if (wx.createInterstitialAd) {