day03視圖與邏輯

来源:https://www.cnblogs.com/heymar/archive/2022/08/04/16549882.html
-Advertisement-
Play Games

一.頁面導航 1.聲明式導航 通過navigator來跳轉 1.1 導航到tabBar頁面 比如跳轉到tabBar頁面就需要navigator來跳轉,要用到他的url和open-type屬性 1.2 導航到非tabBar頁面 非tabBar頁面只是沒有配置為tabBar的頁面,註意還是頁面 配置其他 ...


一.頁面導航

1.聲明式導航

通過navigator來跳轉

1.1 導航到tabBar頁面

比如跳轉到tabBar頁面就需要navigator來跳轉,要用到他的url和open-type屬性

image-20220728163233305

image-20220728163819582

1.2 導航到非tabBar頁面

非tabBar頁面只是沒有配置為tabBar的頁面,註意還是頁面

配置其他都一樣,將open-type改為navigate即可

為了簡便,當跳轉的為非tabBar頁面可以省略opentype

1.3 後退

點擊實現後退效果,兩個關鍵屬性 opentype為navigateBackdelta為數字表示後退的層級

image-20220728170141004

為了簡便如果只是返回上一個頁面可以省略,delta

2. 編程式導航

2.1 tabBar

到tabBar需要調用 wx.switch(object)方法,裡面的對象配置屬性為

image-20220728170357703

2.2 非tabBar

wx.navigateTo()

裡面的對象屬性同上

2.3 後退

wx.navigateBack()

配置對象為

image-20220728170640656

3. 導航傳參

聲明式導航傳參通過裡面的url查詢字元串的方式

image-20220728171237078

編程式導航通過對象裡面的url來傳參

image-20220728171523626

在onLoad接受導航參數

任何形式導航參數都可以在onLoad鉤子中獲取到,通過他的參數options

image-20220728172613489

二.頁面事件

2.1下拉刷新

實現頁面數據重新載入

  • 首先需要開啟下拉刷新

  • 配置背景顏色和loading樣式

  • 監聽下拉的事件函數 onPullDownRefresh

image-20220728174319103

  • 停止下拉刷新效果,因為下拉刷新就是刷新了數據,但是你會發現loading效果還是在繼續,所以這個時候需要手動去取消刷新效果,wx.stopPullDownRefresh()調用這個方法即可停止刷新

2.2 上拉觸底

就是往上波動也就是頁面向下滑動的過程中會到一個程式去刷新下麵的數據

image-20220728175548963

通過 onReachBottom()事件來監聽上拉觸底

是當一頁的高度走完了之後觸發

上拉觸底距離是指觸發上拉觸底事件時,滾動條距離頁面底部的距離

可在全局或者頁面的json文件配置,通過onReachBottmDistance來配置

不用寫單位,預設px

image-20220728180930268

上拉觸底案例:

首先獲取介面數據,並渲染到頁面,直接通過rgba賦予背景色

image-20220728194458332

image-20220728194505712

image-20220728194510500

然後在上拉觸底事件中,再次獲取數據,關鍵步驟在於獲取數據裡面給data賦值,是在重覆的用解構賦值,添加值進來

image-20220728194736449

image-20220728194742804

然後添加loading效果查看官方文檔,可看到wx.showloading

獲取值之前就loading

image-20220728194938453

註意一個request的回調,complete,表示完成數據請求

image-20220728195240720

節流處理

為什麼要進行節流處理,因為當我們上拉觸底的時候,如果瘋狂上拉,會瘋狂獲取數據顯然這樣是不行的

而上拉觸底節流一般分為這幾個步驟,現在data定義節流閥,然後再獲取數據的函數裡面修改節流閥,最後在上拉觸底事件裡面判斷節流閥

image-20220728200121615

image-20220728200128253

image-20220728200134826

2.3 自定義編譯模式

當我們每次在編輯其他頁面的時候,每次重新編譯都要重新點進這個頁面才能看效果很麻煩

我們可以自定義每次編譯完成都進入自己的頁面

image-20220728200342551

三.生命周期

小程式的生命周期分為應用生命周期和頁面生命周期,其中應用生命周期包含頁面生命周期也就是相當於vm和vc的關係

image-20220729192915024

所以與之對應應用生命周期函數就是小程式從啟動到銷毀的那些函數,而頁面生命周期函數就是一個頁面從載入到銷毀的一些函數

3.1 應用生命周期

應用生命周期函數在app.js中來聲明,分別是onLaunch,onShow,onHide

image-20220729193306525

前臺就是當前在這個小程式裡面就是前臺,後臺就是退回桌面,此時小程式後臺運行

image-20220729193542211

可以在開發工具模擬切後臺,沒有在工具,工具欄管理打開

image-20220729193757224

3.2 頁面生命周期

頁面周期函數有五個

image-20220729193848715

一般在onLoad初始化數據,在onReady修改頁面內容比如修改當面頁面標題

四.WXS腳本

wsx是小程式獨有的一套腳本語言,wxml無法調用頁面js中的函數,需要data來轉換一層,但是可以調用wxml定義的函數,wxs典型應用就是過濾器,將數據處理過後再渲染到頁面,wsx的語法跟js一樣,但是遵循的是commonJS語法

4.1 基本用法

跟script標簽一樣有標簽,寫在wxml中

image-20220729194735331

剛纔是內嵌式,還可以外聯

image-20220729195019143

註意沒有對象簡寫形式

如何引入外聯的wxs腳本

image-20220729195223554

4.2 註意

  • 雖然跟js很像,但是還是不是js語言

  • wxs典型場景就是過濾器,經常配合插值語法使用,不能作為事件回調

    image-20220729195532644

  • 具有隔離性,不能調用js裡面的函數,也不能調用小程式的api

  • 在ios設備,wxs會比js快2-20倍

五.本地生活案例完善

繼續本地生活的案例這次做分頁

點擊list每一項應該進入一個新的頁面並且展示他的內容,所以要把這些都改成navigator組件

image-20220801134336731

並且應該把當前的id和name都傳過去

註意參數為變數直接用插值語法

image-20220801134940662

5.1 設置標題內容創建編譯模式

因為我們這裡的標題是動態獲取的,不能再json文件修改,通過文檔可發現 wx.setNavigationBarTitle動態設置標題

又見文檔可知,要修改視圖層的內容比如標題等,應該在onReady生命周期函數中來

image-20220801135800415

但是由於參數要在onLoad獲取

image-20220801135856776

image-20220801135925731

為了方便我們來調試商鋪列表頁面數據,可以創建編譯模式

image-20220801140132409

5.2 獲取並渲染商鋪列表數據

這裡主要註意兩點

一個是我們後面會上拉觸底繼續獲取請求看到更多數據,這個前面也做過的核心就在我們的數據應該是老數據和新數據的一個合併獲取

image-20220801141858134

還有一個點就是我們需要獲取數據裡面返回來的總數據條數,好做分頁功能,具體是個什麼作用後面會說,這裡主要註意一點對象名如果帶有-這個分隔符就不能用什麼.什麼來獲取了必須要用【】這個形式而且裡面引號包裹

5.3 上拉刷新

首先需要在獲取數據裡面開啟關閉loading效果

image-20220801161358072

然後設置一下上拉觸底的距離

image-20220801161534540

然後邏輯就是在上拉觸底事件中將page+1 再獲取數據,這個時候就會融合目前數據和下一頁數據

image-20220801161829451

然後記得還要做節流

初始為true,在獲取數據裡面先判斷是否為true,進來先改為false,然後complete改為true,下拉觸底事件判斷是否為true,true再page+1,否則return

image-20220801163208531

判斷數據是否載入完畢:

為什麼要進行判斷,因為當我們數據沒有了,你還繼續下拉刷新,不判斷的話就會繼續去請求數據,返回一些空數據回來,正常邏輯這個時候不應該再發起請求了

這裡有個公式,用到前面說的total,專門用來判斷數據是否記載完畢的公式,當前頁碼乘以每一頁展示的數據>=總數據那麼就說明載入完畢了

所以可以在我們上拉觸底再來一個判斷

image-20220801164946021

用微信自帶的彈出提示框

wx.showToast

只不過他要註意的是他預設icon為success,如果不需要要手動修改為none

image-20220801165234871

5.4 下拉刷新

首先應該開啟下拉刷新事件

image-20220801170440812

然後我們下拉刷新主要作用就是回到第一頁的狀態,那就需要重新規劃一些數據

image-20220801170713223

這個時候處理我們的關閉刷新視窗,按理說是放在我們complete回調裡面

image-20220801170829484

但是有個問題就是,這樣一弄不光是下拉刷新,上拉等一系列操作都會去停止一下下拉刷新,顯然不對,這裡應該這麼做

通過一個回調,給這個獲取數據的函數傳一個形參回調函數,然後判斷有回調就執行回調

image-20220801171000337

image-20220801171025712

image-20220801171052707

5.5 wxs處理手機號

首先在外面創建一個wxs文件

image-20220801172105632

裡面為一個函數,然後需要使用commonJs語法導出

註意沒有對象的簡寫形式

image-20220801172359858

然後wxml這邊導入

image-20220801172534524

註意這裡面的,splice方法,如果不刪除,就第二個參數為0,並且要插入就寫上你要插入的數據

image-20220801172743829


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Linux系統基礎(二) 1、重定向 重定向 //將輸出的內容重定向到某個文件 //系統設定: 預設輸入設備 //標準輸入,STDIN,0 (鍵盤) 預設輸出設備 //標準輸出(顯示器) 標準正確輸出 //STDOUT,1 標準錯誤輸出 //STDERR,2 //I/O重定向: >:覆蓋輸出重定向 ...
  • SElinux: 是Linux的一個強制訪問控制的安全模塊 SElinux的相關概念: 對象:文件、目錄、進程、埠等 主體:進程稱為主體 SElinux將所有的文件都賦予一個type類型的標簽,所有的進程也賦予一個domain類型的標簽。domain標簽能夠執行的操作由安全策略里定義 #ubunt ...
  • 修改日期時間的工具 date hwclock timedatectl date工具的使用 作用:顯示和設置系統時間 選項: -d <字元串> 顯示字元串所指的日期與時間,比如:"-1 day" 表示當前日期的前一天,必須要加雙引號 -s <字元串> 設置當前的時間和日期 #年月日使用(-)分隔,時分 ...
  • 搭建lamp架構 1.LAMP架構介紹 所謂lamp,其實就是由Linux+Apache+Mysql/MariaDB+Php/Perl/Python的一組動態網站或者伺服器的開源軟體,除Linux外其它各部件本身都是各自獨立的程式,但是因為經常被放在一起使用,擁有了越來越高的相容度,共同組成了一個強 ...
  • 社區於上個月發佈了 RadonDB MySQL Kubernetes v2.2.0,集群數據備份恢復的存儲類型除了 S3,新增 NFS 存儲。本文將為您演示如何進行 NFS 備份及恢復操作。 環境準備 Kubernetes 集群 RadonDB MySQL 集群 過程略,詳細請回顧《快速實現 MyS ...
  • 1. 數據操作類語句: SELECT:從資料庫表中檢索數據行和列 INSERT:把新的數據表記錄添加到資料庫中 DELETE:從資料庫中刪除數據記錄,針對數據進行操作 UPDATE:修改現有資料庫中的數據 2. 數據定義類語句: CREATE:創建新的資料庫或者表等結構 DROP:從資料庫中刪除表或 ...
  • 最近做了一個校園拍賣小程式,想在裡面添加一個類似校園圈功能,現在來一步一步實現。 一、設計所需要的表 1、文章表 文章表很簡單,就類似朋友圈,一個文字內容,一個圖片數組 2、評論表 3、點贊表 二、發佈動態 1、文本區 游標有點問題,回車換行時游標和文字被埋在下麵了 解決,給textarea設置一個 ...
  • 1 語聊房應用場景說明 七夕禮物準備好了嗎?程式猿七夕禮物標配,給女友搭建專屬語聊房,既浪漫又硬核! 語聊房在社交場景中使用比較廣泛,社交APP中的語聊房場景的實現,主要由業務系統和移動/Web 客戶端組成。其中業務系統需要實現語聊房的房間管理、麥位管理、音頻流和麥位關聯關係管理等功能,客戶端需要實 ...
一周排行
    -Advertisement-
    Play Games
  • 使用原因: 在我們服務端調用第三方介面時,如:支付寶,微信支付,我們服務端需要模擬http請求並加上一些自己的邏輯響應給前端最終達到我們想要的效果 1.使用WebClient 引用命名空間 using System.Net; using System.Collections.Specialized; ...
  • WPF 實現帶蒙版的 MessageBox 消息提示框 WPF 實現帶蒙版的 MessageBox 消息提示框 作者:WPFDevelopersOrg 原文鏈接: https://github.com/WPFDevelopersOrg/WPFDevelopers.Minimal 框架使用大於等於.N ...
  • 一、JSON(JavaScript Object Notation)的簡介: ① JSON和XML類似,主要用於存儲和傳輸文本信息,但是和XML相比,JSON更小、更快、更易解析、更易編寫與閱讀。 ② C、Python、C++、Java、PHP、Go等編程語言都支持JSON。 二、JSON語法規則: ...
  • 1.避免Scoped模式註冊的服務變成Singleton模式 當提供一個生命周期模式為Singleton的服務實例時,如果發現該服務中還依賴生命周期模式為Scoped的服務實例(Scoped服務實例將被一個Singleton服務實例所引用),那麼這個被依賴的Scoped服務實例最終會成為一個Sing ...
  • 索引時資料庫提高數據查詢處理性能的一個非常關鍵的技術,索引的使用可以對性能產生上百倍甚至上千倍的影響。接下來,會介紹索引的基本原理、概念,並深入學習資料庫中所使用的索引結構和存儲方式,以及如何管理、維護索引等。 1.索引的基本概念 索引時用來快速查詢表記錄的一種存儲結構,一般使用索引有一下兩個方面: ...
  • django2 路由控制器 Route路由,是一種映射關係。路由是把客戶端請求的url路徑和用戶請求的應用程式,這裡意指django裡面的視圖進行綁定映射的一種關係。 請求路徑和視圖函數不是一一對應的關係 在django中所有的路由最終都被保存到一個叫urlpatterns的文件里,並且該文件必須在 ...
  • 1、我們的目標是獲取微博某博主的全部圖片、視頻 2、拿到網址後 我們先觀察 打開F12 隨著下滑我們發現載入出來了一個叫mymblog的東西,展開響應發現需要的東西就在裡面 3、重點來了!!! 通過觀察發現第二頁比第一頁多了參數since_id 而第二頁的since_id參數剛好在上一頁中能獲取到, ...
  • 一、實現原理 在Servlet3協議規範中,包含在JAR文件/META-INFO/resources/路徑下的資源可以直接訪問。 二、舉例說明 如下圖所示,是我新建的一個Spring Boot Starter項目:zimug-minitor-threadpool,用於實現可配置、可觀測的線程池。其中 ...
  • 精華筆記: static final常量:應用率高 必須聲明同時初始化 由類名打點來訪問,不能被改變 建議:常量所有字母都大寫,多個單詞用_分隔 編譯器在編譯時會將常量直接替換為具體的數,效率高 何時用:數據永遠不變,並且經常使用 抽象方法: 由abstract修飾 只有方法的定義,沒有具體的實現( ...
  • Python有一個for...else語法,它的寫法如下 for i in range(0,100): if i == 3: break else: print("Not found") 該語句表示:若for迴圈遍歷完畢,則執行else部分的語句。也就是說上述代碼不會有任何輸出,而下述代碼會輸出“N ...