WeChat 애플릿 창 탐색 모음 구성(자세한 예)

이 글은 WeChat 미니 프로그램에 대한 관련 지식을 제공하며, 주로 Windows 네비게이션 바 구성에 대한 관련 내용을 소개합니다. 다음은 창 네비게이션 바 구성 방법을 자세히 소개하는 글입니다. 모든 사람.

【관련 학습 추천: 미니 프로그램 학습 튜토리얼】

wxss에서 rpx를 적용하는 방법과 미니 프로그램의 글로벌 스타일과 로컬 스타일 구성을 소개하고, 그 방법을 자세히 소개하겠습니다. 창 탐색 모음을 구성합니다.

• rpx 소개

  1. px(해상도) 단위는 이전 HTML 학습에서 컴포넌트를 설정할 때 자주 사용하므로 WeChat 애플릿에서는 What을 사용합니다. 해상도 단위인가요? 그게 rpx인데 구체적으로 설정할 가치가 있을 정도로 특별한 점이 무엇인가요?

  2.rpx는 화면 적응을 해결하는 크기 단위입니다. 화면 크기에 관계없이 화면 너비가 지정됩니다. 750rpx가 되어야 합니다. rpx를 통해 요소와 글꼴의 크기를 설정하세요. 미니 프로그램은 다양한 크기의 화면에서 자동으로 rpx와 px 사이의 변환에 적응할 수 있습니다.

  <code><span style="font-size: 14px;">特别的在我们微信小程序开发中，我们前面提到过推荐使用 iPhone 6 进行开发，因为 iPhone 的 px =375，那么我们 2 rpx= 1 px</span>

• 关于全局配置和局部配置

  关于全局配置和局部配置我们前面也是以及介绍完毕，感兴趣的小伙伴可以前面考古一下！下面我会专门讲一下在 全局配置中常用的配置项！

一、全局配置的常用配置项

老规矩先用表格展示一下。특히 WeChat 미니 프로그램 개발에서 앞서 언급한 바 있습니다. iPhone 6의 사용을 권장합니다. iPhone의 px = 375이므로 2 rpx = 1 px

전역 구성 및 로컬 구성 정보전역 구성 및 로컬 구성, 이전에도 소개한 적이 있습니다. 감사합니다. 관심 있는 친구들은 미리 고고학을 할 수 있습니다! 다음으로는 글로벌 구성에서 흔히 사용되는 구성 항목에 대해 말씀드리겠습니다! 1. 전역 구성의 공통 구성 항목이전 규칙이 먼저 표에 표시됩니다.

configuration 항목 namefunection
pages	Storage 경로 현재 미니 프로그램의 모든 페이지에 대해 미니 프로그램 창의 모양을 설정하십시오

tabBar

• 미니 프로그램 하단에 tabBar 효과를 설정합니다

• style
  새 버전의 컴포넌트 옵션 활성화 여부

• pages 이전에도 소개해드린 것처럼 in 목록 페이지를 표시하기 위해 페이지를 사용했습니다. 첫 번째 경로가 목록의 경로로 변경된 다음 WeChat 애플릿의 페이지에 목록의 내용이 표시됩니다.

  window 및 tabBar 다음 그림을 살펴보겠습니다. , 그리고 그는 우리의 목록을 소개합니다.

스타일을 앞서 소개했을 때 스타일을 삭제하면 컴포넌트 스타일이 이전 버전이 됩니다.

기능 다이어그램

2. 창 탐색 모음 창 탐색 모음 설정에는 이전 그림에 표시된 처음 두 영역이 포함됩니다. 먼저 창 노드의 공통 구성 항목을 소개하겠습니다. Nav 안내 표시줄 제목 콘텐츠 탐색 모음 배경색 설정(예: 형광 노란색 #ffa)탐색 모음 제목 색상 설정(흑백만)창의 배경색어두운/밝은 것만 지원하는 드롭다운 스타일 설정드롭다운을 전체적으로 활성화할지 여부 Refresh

속성 이름	Type	기본값	Function
	navigationBarTitleText	string	문자열
	navigationBarBackgroundColor	Hexcolor	# 000000
	navigationBarTextStyle	string	white
	BackgroundColor	Hexcolor	#ffffff
	배경TextStyle	string	dark
	enablePullDownRefresh	Boolean	거짓

🎜🎜onReachBottomDistance🎜🎜Number🎜🎜50🎜🎜페이지 풀 하단 이벤트 트리거 임계값(페이지 하단으로부터의 거리(px))🎜🎜🎜🎜

위의 모든 설정은 app.json 내의 창에서 설정됩니다! ! ! 다음으로, NavigationBarTitleText 및 드롭다운 관련 속성을 보여드리겠습니다. 나머지 구성 항목을 직접 사용해 볼 수 있습니다. 我们所有的上述设置都是在 app.json 内的 window 里面进行设置！！！接下来我演示一下 navigationBarTitleText 和 下拉相关属性 ，剩下的配置项大家可以自行尝试！

2.1 navigationBarTitleText 配置项

话不多说开始操作！

• 打开 app.json ，找到 window

• 在 window 中我们可以看到下面默认的配置项目

    "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
   },

• 我们可以看到第三行的 navigationBarTitleText 即为我们的导航栏标题内容的配置，默认为 Weixin ，比如我更改为 “皮皮的小屋”

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "皮皮的小屋",
    "navigationBarTextStyle":"black"
   },

• 效果展示：

  

2.2 下拉刷新的配置

关于下拉刷新我相信大家一定经常使用，比如我们使用手机时卡顿了，那么我们习惯性动作就是向下拉动屏幕，这样我们的页面就会重新加载，那么我们如何实现功能呢？

• 首先打开 app.json 进入 window 配置，打开下拉功能

    "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#ffa",
    "navigationBarTitleText": "皮皮的小屋",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true
   },

• 在最后一行我们将 enablePullDownRefresh 设置为 true 即可

• 效果展示：

  

至此我们对于这些配置就进行了简单的介绍，我们在自行尝试这些配置项的时候需要注意的就是我们 onReachBottomDistance ，他的上拉触底的意思就是我们平时刷购物平台的时候，当我们刷新到离底部一定距离的时候，页面会自动刷新下面的数据，我们就是通过 onReachBottomDistance 设置自动刷新的位置

2.1 NavigationBarTitleText 구성 항목

더 이상 고민하지 말고 시작해 보세요!

app.json을 열고 창을 찾으세요

🎜창에서 다음과 같은 기본 구성 항목을 볼 수 있습니다🎜rrreee

🎜 세 번째 줄의 NavigationBarTitleText는 탐색 모음 제목 콘텐츠의 구성입니다. 기본값은 Weixin입니다. 예를 들어 "Pippi's Cabin" 🎜rrreee

🎜Effect display: 🎜

🎜🎜

/ li>

🎜2.2 풀다운 새로 고침 구성

🎜정보 다음당겨서 새로고침 자주 사용하셔야 할 것 같아요. 예를 들어 휴대폰을 사용하다가 멈췄을 때 우리의 습관적인 행동은 다음과 같습니다. 페이지를 다시 로드하려면 화면을 아래로 내리세요. 그러면 이 기능을 어떻게 구현하나요? 🎜

• 🎜먼저 app.json을 열고 창 구성에 들어간 후 풀다운 기능을 켜세요🎜rrreee
• 🎜마지막 줄에, 활성화PullDownRefresh를 true로 설정했습니다🎜
• 🎜효과 표시: 🎜

  🎜🎜

🎜지금까지 이러한 구성에 대해 간략하게 소개했습니다. 이러한 구성 항목을 직접 시도하는 것은 onReachBottomDistance이며, 풀업 및 바텀아웃은 일반적으로 쇼핑 플랫폼을 새로 고칠 때 바닥에서 특정 거리까지 새로 고칠 때 페이지가 자동으로 다음 데이터를 새로 고치는 것을 의미합니다. onReachBottomDistance를 통한 자동 새로고침 위치🎜🎜【관련 학습 권장사항: 🎜미니 프로그램 학습 튜토리얼🎜】🎜

위 내용은 WeChat 애플릿 창 탐색 모음 구성(자세한 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!