mui 選項卡切換 上拉載入 ajax

2021-08-28 14:45:36 字數 1098 閱讀 8203

因最近開發h5用的前端框架是mui,教程和demo大部分沒有動態資料,在網上也沒有很好的辦法,比較喜歡簡單粗暴就直接上**了。

1.1關於mui的選項卡切換的樣式,mui的官網上有,在這就不多說了

1.2 直接上**

hello mui

待審核

派單中

已完成

//選項卡中的下拉功能是採用的下面的外掛程式,和mui.min,js裡自帶的下拉功能不一樣,但是api是基本一致的,別的**和官網都有描述,請自行查閱

1.3 做重點描述

(1)mui的html的結構以及裡的class要按照我上面的寫法來寫,要不然部分內容不會插入到頁面中,劃屏效果以及滾動效果出不來。我寫的樣式是駝峰命名的,如果不用請自行刪除,保留mui的class。

(2)這個demo用到的外掛程式是mui.pulltorefresh.js以及mui.pulltorefresh.material.js是選項卡下拉載入

(3)$.each,如同jquery的用法一樣,index代表索引,pullrefreshel代表每乙個元素。

(4)其重點在**中做了注釋,不在多說,當時是為了完成功能寫的**,並沒有進行優化

這是我專案的最終效果圖,此文章重點描述如何選項卡+上拉載入與ajax使用

1.頁面剛進入會觸發一次請求,此時為第一頁

3.沒有資料了

選項卡切換

方法一 class box class title 111h2 222h2 333h2 444h2 div class cont 第乙個新聞內容p 第二個新聞內容p 第三個新聞內容p 第四個新聞內容p div div var ah2 document.queryselectorall title h...

選項卡切換

引用 相信使用過android手機的朋友都見過下面樣子的選項卡,本文我們嘗試做的演示。這個選項卡頁面,或者說是標籤卡。分為兩部分 乙個頂部的按鈕 可點選的 的切換卡部分 乙個主內容區 上圖顯示 第二個窗體 字型的 的主顯示區。我們想實現的效果是點選切換的選項卡卡部分,主顯示區的內容隨之改變。那麼我們...

react tab選項卡切換

tab選項卡切換是個很常見也很簡單的小功能,用原生js和jq去寫的話可能不到20行 就搞定so easy。但是用react去實現就沒那麼容易了 是自己react比較菜 由於最近在重新學習react就試著寫了乙個tab切換的小列子。還有多可優化的地方希望能拋磚引玉 簡單寫了點注釋 html js im...