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

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

小云云
小云云原創
2018-05-10 17:27:418513瀏覽

本文主要介紹了微信小程式實現動態設定頁面標題的方法,涉及微信小程式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: &#39;标题1&#39;,
  })
 },
 // 设置标题为:标题2
 setBiaoTi2: function () {
  wx.setNavigationBarTitle({
   title: &#39;标题2&#39;,
  })
 },
 // 设置标题为:标题3
 setBiaoTi3: function () {
  wx.setNavigationBarTitle({
   title: &#39;标题3&#39;,
  })
 },
 // 设置标题为:动态设置页面标题
 back:function(){
  wx.setNavigationBarTitle({
   title: &#39;脚本之家 - 动态设置页面标题&#39;,
  })
 }
})

③ WXSS檔案

button{
 margin-top:10px;
}

相關推薦:

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

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn