如何使用uni-app項目中的collapse摺疊面板

2020-12-06 IT軟體專家

工具

HBuilderX微信開發者工具技術

vueuni-appJavaScriptCSS微信小程序1、在HBuilderX工具中，創建uni-app項目，並新建頁面文件collapse；打開pages.json，配置摺疊面板文件路徑

新建頁面文件，配置頁面路徑

2、打開已新建的頁面文件，插入uni-collapse組件，設置title、thumb、open、showAnimation和disabled

title：標題

thumb：標題左側縮略圖

open：是否展開面板

showAnimation：是否開啟動畫

disabled：是否禁用

插入uni-collapse，設置相關屬性

3、保存代碼並編譯，打開微信開發者工具，查看效果

保存並編譯代碼，打開工具，查看效果

4、接著，在uni-collapse組件，添加change事件

uni-collapse組件，添加change事件

5、在methods對象中，定義change事件

在methods對象中，定義change事件

6、再次保存並編譯，查看微信開發者工具，模擬器顯示效果

微信開發者工具，模擬器顯示效果

7、依次點擊collapse摺疊面板，查看控制臺列印結果

點擊collapse摺疊面板，查看控制臺列印

相關焦點

  • elementui中Collapse摺疊面板的全部展開
    這裡的demo使用的組件開發，裡面的chapterList欄位是由父級頁面傳入。代碼示例圖1、圖片中標識的 1 是 v-model 要執行的函數方法，1 裡面的this.chapterList 欄位是從父級頁面傳入的數據。
  • 如何在uni-app項目中使用數據緩存方法
    工具HBuilderX微信開發者工具技術vueuni-appJavaScriptCSS3在使用uni-app進行微信小程序開發過程中，如果不同界面中需要登錄用戶的信息，這時就需要用到數據緩存。如何設置緩存、獲取緩存、刪除緩存和清空緩存？
  • 面板摺疊:「韓退中進」背後,京東方、TCL與杉杉的隱憂
    2020年顯示面板最大的故事是「韓」退「中」進。隨著韓國三星和LG退出LCD賽道成為定局，我國一躍成為全球LCD領頭羊，京東方(SZ:000725)和TCL華星也滿懷信心從「吸血鬼」改頭換面成為「現金牛」，甚至門外漢如杉杉股份(600884,股吧)(SH:600884)也通過收購LG偏光片資產妄圖分一杯羹。
  • 三星電子和康寧合作開發超薄可摺疊玻璃面板
    三星是可摺疊智慧型手機的先鋒，今天也剛剛發布了 Galaxy Z Fold2 作為其第三款可摺疊設備。在此之前，有消息稱三星電子已與康寧合作開發可摺疊玻璃。
  • Uniswap的恆定乘積算法裡的K值是如何設計的?
    小編：記得關注哦來源：閃電黃世亮原文標題：Uniswap的恆定乘積算法裡的K值是如何設計的？作者：閃電黃世亮本文介紹uniswap裡的恆定乘積算法中的K值是怎麼設計的。我們拿uniswap裡的一個交易對，ETH/USDT來舉例說明K值是怎麼設計的。
  • Cell Reports:蛋白質摺疊過程中關鍵作用因子的發現
    ，近日，來自德國馬克思普朗科生物化學研究所（MPIB）的研究人員分析了在蛋白質摺疊過程中的一個關鍵因子，即分子伴侶DnaK，研究者Ulrich Hartl表示，理解蛋白質摺疊過程中的分子機制，尤其是摺疊錯誤，對於了解很多疾病發病的分子機制很有必要。
  • 盤點2020年三大潛力項目(1)——UNI(Uniswap)
    直到SushiSwap通過類似YFI的代幣分發機制對Uniswap啟動分叉，同時其他swap也開始嘗試撬走uniswap的流動性時，Uniswap知道，如果再沉默下去，自己可能會成為被DeFi迅速更替的浪潮淘汰的無數項目之一，從DEX和DeFi的名單中被抹去。
  • Block72爐邊對話- Uniswap- Matteo
    實際上，Uniswap已經在DEX領域中使用了有效的Gas費使用方法。 問：讓我們來談談V3，這是對團隊提問需求最多的類別之一。  不幸的是，由於V3正在開發中，所以我無法透露太多細節。 讓我們從現在團隊如何看待Sushiswap開始吧？  Sushi的興起表明了在開源環境中進行開發的獨特性。總體來說，這在AMM領域應該是積極的。
  • 賽德年產600萬張柔性摺疊超薄玻璃項目落戶杭州 ​
    【維文信TP世界】據錢塘新區發布消息，1月15日，杭州錢塘新區、杭實集團和賽德半導體有限公司（以下簡稱「賽德半導體」）舉行項目籤約儀式，這標誌著賽德半導體項目正式落戶錢塘芯谷。據了解，賽德半導體從事可摺疊超薄柔性玻璃的研發和生產，相關玻璃處理技術處於業內領先地位，具備整套研發和製造能力。該公司目前已與京東方、維信諾、和輝光電等面板公司以及華為、小米、OPPO等手機、電腦廠商展開合作，與三星、LG等韓國公司亦在接洽中。天眼查顯示，賽德半導體有限公司成立於2020年12月25日，註冊資本5000萬人民幣，由安徽賽德光電技術有限公司100%持股。
  • 英文閱讀4——Anak Krakatau volcano collapse
    科學家們說，在災難發生前的幾個月中，衛星觀測到了火山上的溫度升高和地面運動。Earthquake and infrasound activity was also detected two minutes prior to the collapse of Anak's southwestern flank. 在Anak西南側坍塌前兩分鐘，也發現了地震和次聲活動。
  • 深度解析京東方_行業新聞_液晶面板資訊_液晶面板_觸控螢幕與OLED網
    福州項目政 府籌集的 150 億元人民幣以無息銀行委託貸款形式提供給公司。兩個方案中，公司出資 佔總投資額均僅為 10%。2016 年後投資熱潮向 AMOLED 蔓延，高世代 TFT-LCD 熱度不 減，三大在建六代 AMOLED 項目（綿陽、重慶、福清）政府出資佔比註冊資本金均超 50%。
  • 如何在Vue3框架中使用Element Plus
    那麼，Vue3框架如何使用Element Plus？下面利用實例說明：操作步驟：1、打開電腦硬碟，新建一個文件夾aam，打開文件夾並打開Git命令窗口；輸入命令npm install -g @vue/cli
  • 如何使用TensorFlow Hub的ESRGAN模型來在安卓app中生成超分圖片
    儘管可以使用傳統的插值方法（如雙線性插值和雙三次插值）來完成這個任務，但是產生的圖片質量卻經常差強人意。深度學習，尤其是對抗生成網絡 GAN，已經被成功應用在超分任務上，比如 SRGAN 和 ESRGAN 都可以生成比較真實的超分圖片。那麼在本文裡，我們將介紹一下如何使用TensorFlow Hub上的一個預訓練的 ESRGAN 模型來在一個安卓 app 中生成超分圖片。
  • vk-uni-cloud-router v1.6.2 發布,uniCloud 雲函數路由框架
    id=2204當前插件版本：1.6.2當前集成的 uni-id 版本：2.0.3更新內容(主要)：1、【重要】項目目錄有重大調整。詳情請看1.6.2版本更新說明https://ext.dcloud.net.cn/plugin?
  • 德國自適應摺疊涼亭,來自瓢蟲的設計靈感
    斯圖加特大學的ITECH研究組在2018-19階段開發了一種自適應性的結構，其靈感來源於瓢蟲翅膀的摺疊機制。該結構由兩個可調節的摺疊單元組成，材料選用了碳纖維和玻璃纖維增強塑料，是第一個以工業鋪帶技術自動裝配的大尺寸適應性機械裝置。
  • 武漢華星光電柔性LTPS-AMOLED顯示面板項目首臺曝光機搬入
    「我宣布，華星光電t4項目首臺曝光機開始搬入！」7月20日上午，隨著武漢華星光電半導體顯示技術有限公司總經理趙勇的一聲令下，在現場全體員工的注視中，武漢華星光電第六代柔性LTPS-AMOLED顯示面板項目（以下簡稱t4項目）首臺曝光機緩緩吊入廠房。
  • 可摺疊OLED顯示屏比一般柔性OLED有更複雜的結構
    OLED如何製成可摺疊？目前面板行業有兩大主流技術：傳統的薄膜電晶體液晶顯示器（TFT LCD）以及有機發光二極體（OLED），後者又包括剛性的Rigid OLED以及柔性的OLED，後者依據彎曲程度的大小，又分為可撓曲、可摺疊、可捲曲三種。如何把剛性的OLED變成可摺疊OLED？
  • 明基材偏光板產能滿載 評估進軍摺疊手機市場
    針對智慧手機及手錶應用的摺疊偏光板預計7月開發完成，將具量產能力；他並透露，明基材偏光板「目前產能已滿到不能再滿，」，今年供應吃緊狀態將維持一整年。陳建志指出，摺疊手機是面板產業熱門的話題，目前摺疊手機只能採用有機發光二極體（OLED）面板，明基材料也已開發供應OLED面板使用的偏光板，並與中國大陸生產OLED面板的廠商接觸，評估合作進軍摺疊手機市場的可能。
  • 江西TFT-LCD面板項目出現變故,韓國廠商欲哭無淚
    據悉,DMS在此次合作中為益豐泰生產製造TFT-LCD的專用設備,並供其使用。怎奈益豐泰始終無法履行合同,才導致合同失效。那麼,到底是什麼導致了益豐泰無法履行合同?這還要從這條TFT-LCD面板項目開始說起。
  • 江西TFT-LCD面板項目出現變故 韓國廠商欲哭無淚
    據悉，DMS在此次合作中為益豐泰生產製造TFT-LCD的專用設備，並供其使用。怎奈益豐泰始終無法履行合同，才導致合同失效。　　那麼，到底是什麼導致了益豐泰無法履行合同？這還要從這條TFT-LCD面板項目開始說起。