微信小程式實作動態設定頁面標題方法分享

本文主要介紹了微信小程式實現動態設定頁面標題的方法,涉及微信小程式button元件事件綁定及頁面元素屬性動態設定相關實作技巧,並附帶完整原始碼供讀者下載參考,需要的朋友可以參考下，希望能幫助大家。

本文實例講述了微信小程式實作動態設定頁面標題的方法。分享給大家供大家參考，具體如下：

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;
}

相關推薦：

React操作真實DOM實現動態吸底部

############################################################################ #######使用jQuery實作動態新增小廣告詳解############結合css用Html 實作動態顯示色彩區塊的報表效果######

以上是微信小程式實作動態設定頁面標題方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！