WeChat 애플릿 wxapp 탐색 탐색기 자세한 설명

본 글은 위챗 미니 프로그램 wxapp 네비게이션 네비게이터에 대한 자세한 설명을 중심으로 관련 정보를 소개하고, 간단한 예시 코드를 첨부합니다. 필요한 친구는

WeChat 미니 프로그램 wxapp 네비게이션 네비게이터

를 참고하세요.

최근 WeChat 미니 프로그램이 인기가 많습니다. 모멘트, 웨이보, 포럼 등이 모두 화면에 넘쳐납니다. 지금이 프론트엔드 개발의 봄이기 때문에 프론트엔드 엔지니어들은 많은 돈을 벌 수 있습니다. 여가 시간에 배운 WeChat 미니 프로그램에 대한 지식은 여기에 기록되어 있습니다.

참고: navigator-hover의 기본값은 {배경색:rgba(0,0,0,0.1);불투명도:0.7;}입니다. 하위 노드의 배경색은 투명해야 합니다.

샘플 코드:

属性名	类型	默认值	说明
url	String		应用内的跳转链接
redirect	Boolean	false	是否关闭当前页面
hover-class	String	navigator-hover	指定点击时的样式类，当hover-class="none"时，没有点击态效果

/** wxss **/
/** 修改默认的navigator点击态 **/
.navigator-hover{
  color:blue;
}
/** 自定义其他点击态样式类 **/
.other-navigator-hover{
  color:red;
}

<!-- sample.wxml -->
<view class="btn-area">
  <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开</navigator>
</view>
</navigator>

<!-- navigator.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到之前页面 </view>

<!-- redirect.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到上级页面 </view>

// redirect.js navigator.js
Page({
 onLoad: function(options) {
  this.setData({
   title: options.title
  })
 }
})

읽어주셔서 감사합니다. 모든 사람에게 도움이 되기를 바랍니다. 이 사이트를 지원해 주셔서 감사합니다!

WeChat 애플릿 wxapp 탐색 탐색기에 대한 자세한 설명 및 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!