學習Uni-app開發小程序Day18

昨天學習了使用輪播顯示圖片和文字，輪播方式縱向和橫向。今天使用擴展組件和scroll-view顯示圖片，使用scroll-view的grid方式、插槽slot、自定義組件、磨砂背景定位布局做專題組件
在這里插入圖片描述
這就是需要做成的效果，下面將一步一步的完成。
首先，這里的每日推薦和專題精選都是相同的組件，這里使用自定義組件進行，
第一步：在項目根目錄創建文件夾，components文件夾，創建組件，
看這個布局，是文字不同，后面的顯示不同，這里使用slot

<template><view class="common-title"><view class="name"><slot name="name"></slot></view><view class="custom"><slot name="custom"></slot></view></view>
</template><script setup></script><style lang="scss" scoped>.common-title{display: flex;justify-content: space-between;//這是讓兩端對齊align-items: center;padding: 0 30rpx;.name{font-size: 40rpx}}</style>

這里就是用slot了，定義一個slot的名稱，在父組件中直接傳參就能顯示不同的效果

<common-title><template v-slot:name>每日推薦</template><template #custom><view class="date"><uni-icons type="calendar" size="18" color="#309877"></uni-icons><view class="text"><uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat></view></view></template>
</common-title>
<view class="content"><scroll-view scroll-x><view class="box" v-for="item in 8"><image src="../../common/images/preview_small.webp" mode="aspectFill"></image></view></scroll-view>
</view>

這就是拓展組件和插槽的使用，這里也使用了擴展組件，順便復習下，擴展組件的使用：找到需要的組件，點擊下載導入，使用的時候，只用引入需要的組件名稱，就可以使用了，至于組件的屬性，查看文檔有詳細說明。
以上是每日推薦模塊，但是出來后顯示的布局方式是縱向顯示的，這里需要修改樣式，讓橫向顯示，

.select {margin-top: 50rpx;.content {width: 720rpx;margin-left: 30rpx;margin-top: 30rpx;scroll-view {white-space: nowrap;.box {width: 200rpx;height: 430rpx;display: inline-block;margin-right: 15rpx;image {width: 100%;height: 100%;border-radius: 10rpx;}}.box:last-child {margin-right: 30rpx;}}}.date {color: #309877;display: flex;align-items: center;.text {margin-left: 5rpx;}}}

這就把每日推薦這個模塊的全部顯示出來了。
下來是要做專題精選，這里文字模塊，使用的和每日推薦使用的是相同的布局，直接使用同樣的組件就好。下面的圖片顯示，使用的是scroll-view的grid方式，因為布局后面，還有個模糊的更多，點擊圖片進入的是圖片詳情，點擊更多進入的是其他頁面，兩個顯示的不同，點擊后進入的方式也不同，這里就用到grid了，

<view class="theme"><common-title><template v-slot:name>專題精選</template><template #custom><navigator url="" class="more">More+</navigator></template></common-title><view class="content"><theme-item v-for="item in 5"></theme-item><theme-item :isMore="true"></theme-item></view></view>
<!-- style -->
.theme{margin: 50rpx 0;.more{font-size: 32rpx;color: #888;}.content{margin-top: 30rpx;padding: 0 30rpx;display: grid;gap: 15rpx;//屬性是用來設置網格行與列之間的間隙，該屬性是 row-gap 和 column-gap 的簡寫形式grid-template-columns: repeat(3,1fr);//display：grid 是轉為網格布局，這個是必須的// grid-template-columns：1fr | px 這是將網格分為幾列，1fr是自適配單位，可以當成柵格,這里也可以是用repeat（3,1fr），是平分成三列，然后自適應寬度，這里看自己需求需要分成幾列//grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); 這種寫法可以用來做響應式布局，auto-fill主軸上指定的寬度或者重復次數是最大可能的正整數，minmax最小值255px、最大值1fr代表剩余空間的比例。注意：實現這種響應式布局，一定要注意父容器不能使用固定寬度，可以將父容器改為如：80%，這樣就能根據屏幕的寬度，自動展示一行展示幾個了。// gap:30px 這是網格四周的間隔// 注意：這三個屬性是給父容器添加的，子元素，可以不用設置寬度，也不用設置margin間距即可完成如下布局。// grid-row和grid-column可以控制某個元素占領幾份// 以grid-row行為例，從第幾列開始 / 第幾列+想占幾個；// grid-row: 1/3;// grid-column: 1/3;}}

上面是設置grid顯示的不同的樣式，是不是看的云里霧里的，沒事，老師有專門的課程，grid網格布局，比flex方便太多了，介紹幾種常用的grid布局屬性，這里有詳細的解釋和案例，
磨砂背景定位布局，在列表中，圖片上特定區域，有文字和磨砂背景的，這里也是使用自定義組件的方式

<template><view class="theme-item"><navigator url="" class="box" v-if="!isMore"><image class="pic" src="../../common/images/classify1.jpg" mode="aspectFill"></image><view class="mack">明星美女</view><view class="tabMack">3天前更新</view></navigator><navigator url="" class="box more" v-else><image class="pic" src="../../common/images/more.jpg" mode="aspectFill"></image><view class="mack"><uni-icons type="more-filled" size="34" color="#fff"></uni-icons><text class="text">更多</text></view></navigator></view>
</template><script setup>
defineProps({isMore:{type:Boolean,default:false}
})
</script><style lang="scss" scoped>.theme-item {.box {height: 340rpx;border-radius: 10rpx;overflow: hidden;position: relative;.pic {width: 100%;height: 100%;}.mack {width: 100%;height: 70rpx;position: absolute;bottom: 0;left: 0;font-size: 30rpx;background: rgba(0, 0, 0, 0.2);color: #fff;display: flex;align-items: center;justify-content: center;backdrop-filter: blur(20rpx);font-weight: 600;}.tabMack {position: absolute; //指定一個元素在文檔中的定位方式left: 0;top: 0;background: rgba(250, 190, 90, 0.7);backdrop-filter: blur(20rpx); //backdrop-filter CSS 屬性可以讓你為一個元素后面區域添加圖形效果（如模糊或顏色偏移）font-size: 22rpx;color: #fff;padding: 6rpx 14rpx;border-radius: 0 0 20rpx 0;transform: scale(0.8); //屬性允許你旋轉，縮放，傾斜或平移給定元素。這是通過修改 CSS 視覺格式化模型的坐標空間來實現的。transform-origin: left top; //更改一個元素變形的原點}}.box.more{.mack{width: 100%;height: 100%;flex-direction: column;}.text{font-size: 28rpx;}}}
</style>

下面是整頁的詳細代碼

<template><view class="homeLayout"><view class="banner"><swiper indicator-dots autoplay circular :interval="3000" :duration="1000"indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#ffffff"><swiper-item v-for="(item,index) in picArr" :key="item.id"><image :src="item.src" mode="aspectFill"></image></swiper-item></swiper></view><view class="notice"><view class="letf"><uni-icons type="sound-filled" size="20" color="#309877"></uni-icons><text class="text">公告</text></view><view class="center"><swiper vertical circular autoplay interval="1500" duration="300"><swiper-item v-for="item in 4">內容文字內容文字內容文字內容文字內容文字</swiper-item></swiper></view><view class="rigth"><uni-icons type="right" size="16" color="#333"></uni-icons></view></view><view class="select"><common-title><template v-slot:name>每日推薦</template><template #custom><view class="date"><uni-icons type="calendar" size="18" color="#309877"></uni-icons><view class="text"><uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat></view></view></template></common-title><view class="content"><scroll-view scroll-x><view class="box" v-for="item in 8"><image src="../../common/images/preview_small.webp" mode="aspectFill"></image></view></scroll-view></view></view><view class="theme"><common-title><template v-slot:name>專題精選</template><template #custom><navigator url="" class="more">More+</navigator></template></common-title><view class="content"><theme-item v-for="item in 5"></theme-item><theme-item :isMore="true"></theme-item></view></view></view>
</template><script setup>import {ref} from 'vue';const picArr = ref([{id: 1,src: "../common/images/banner1.jpg"},{id: 2,src: "../../common/images/banner2.jpg"},{id: 3,src: "../../common/images/banner3.jpg"}])
</script><style lang="scss" scoped>.homeLayout {.banner {width: 750rpx;padding: 30rpx 0; //padding：當是一個值的時候：是周圍四邊，兩個值：第一個是：上下；第二個是左右；當三個值：第一是上。第二個是左右，第三個是下；當是四個值：第一個是上，第二個右，第三個下，第四個左swiper {width: 750rpx;height: 340rpx;&-item {width: 100%;height: 100%;padding: 0 30rpx;image {width: 100%;height: 100%;border-radius: 10rpx;}}}}.notice {width: 690rpx;height: 80rpx;line-height: 80rpx;background: #f9f9f9;margin: 0 auto;border-radius: 80rpx;display: flex;.letf {width: 140rpx;display: flex;justify-content: center;align-items: center;.text {font-weight: 600; //指定了字體的粗細程度, 詳細查看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-weightfont-size: 28rpx;color: #309877;}}.center {flex: 1;swiper {height: 100%;&-item {height: 100%;font-size: 30rpx;color: #666;overflow: hidden; //設置了元素溢出時所需的行為——即當元素的內容太大而無法適應它的區塊格式化上下文時。white-space: nowrap; //用于設置如何處理元素內的空白字符，nowrap是不讓換行顯示text-overflow: ellipsis; // 用于確定如何提示用戶存在隱藏的溢出內容 ellipsis：超出文本部分使用省略號}}}.rigth {width: 70rpx;display: flex;justify-content: center;align-items: center;}}.select {margin-top: 50rpx;.content {width: 720rpx;margin-left: 30rpx;margin-top: 30rpx;scroll-view {white-space: nowrap;.box {width: 200rpx;height: 430rpx;display: inline-block;margin-right: 15rpx;image {width: 100%;height: 100%;border-radius: 10rpx;}}.box:last-child {margin-right: 30rpx;}}}.date {color: #309877;display: flex;align-items: center;.text {margin-left: 5rpx;}}}.theme{margin: 50rpx 0;.more{font-size: 32rpx;color: #888;}.content{margin-top: 30rpx;padding: 0 30rpx;display: grid;gap: 15rpx;//屬性是用來設置網格行與列之間的間隙，該屬性是 row-gap 和 column-gap 的簡寫形式grid-template-columns: repeat(3,1fr);//display：grid 是轉為網格布局，這個是必須的// grid-template-columns：1fr | px 這是將網格分為幾列，1fr是自適配單位，可以當成柵格,這里也可以是用repeat（3,1fr），是平分成三列，然后自適應寬度，這里看自己需求需要分成幾列//grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); 這種寫法可以用來做響應式布局，auto-fill主軸上指定的寬度或者重復次數是最大可能的正整數，minmax最小值255px、最大值1fr代表剩余空間的比例。注意：實現這種響應式布局，一定要注意父容器不能使用固定寬度，可以將父容器改為如：80%，這樣就能根據屏幕的寬度，自動展示一行展示幾個了。// gap:30px 這是網格四周的間隔// 注意：這三個屬性是給父容器添加的，子元素，可以不用設置寬度，也不用設置margin間距即可完成如下布局。// grid-row和grid-column可以控制某個元素占領幾份// 以grid-row行為例，從第幾列開始 / 第幾列+想占幾個；// grid-row: 1/3;// grid-column: 1/3;}}}
</style>

這里提下，如果圖片放在common下，這個是在打包的時候，只有用到的才會打包，沒有用到的是不打包的，我這里在弄輪播圖的時候，就使用的是common下的圖片了，把這些圖片放在數組中，然后在頁面上使用，在H5的時候，是沒問題的，因此就沒多看，今天在小程序中，輪播圖片不顯示，原因是沒有在小程序中找到，試了各種辦法，還是不行，但把圖片地址直接引用common下的圖片，又可以了，這不清楚原因，這里記錄下，后期知道了在補充。
為什么要專門說下這個，從這里看出，各個平臺存在差異化，目前是以微信小程序為主的，所以在做完一個小功能后，還是要在小程序中查看下是不是可以使用，不然到后期出現問題更改起來會很繁瑣的。
加油，學無止境！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/15720.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/15720.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/15720.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

如何高效創建與配置工程環境：零基礎入門

如何高效創建與配置工程環境：零基礎入門

新書上架~&#x1f447;全國包郵奧~ python實用小工具開發教程http://pythontoolsteach.com/3 歡迎關注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目錄 一、工程環境的搭建與準備 二、配置虛擬環境與選擇解釋器 三、編寫代碼與自動添加多行注釋 …
閱讀更多...
git describe --tags報錯 fatal: No names found, cannot describe anything.

git describe --tags報錯 fatal: No names found, cannot describe anything.

文章目錄 git describe --tags報錯 fatal: No names found, cannot describe anything. git describe --tags報錯 fatal: No names found, cannot describe anything. 問題描述&#xff1a; git describe --tags fatal: No names found, cannot describe anything.原因分析&a…
閱讀更多...
SpringMVC筆記

SpringMVC筆記

一、SpringMVC 簡介 1.1 什么是 MVC MVC 是一種軟件架構的思想&#xff0c;將軟件按照模型、視圖、控制器來劃分 1.M&#xff1a;Model 模型層&#xff0c;指工程中的 JavaBean &#xff0c;作用是處理數據 JavaBean 分為兩類 實體類Bean&#xff1a;專門存儲業務數據的…
閱讀更多...
C++vector的簡單模擬實現

C++vector的簡單模擬實現

文章目錄 目錄 文章目錄 前言 一、vector使用時的注意事項 1.typedef的類型 2.vector不是string 3.vector 4.算法sort 二、vector的實現 1.通過源碼進行猜測vector的結構 2.初步vector的構建 2.1 成員變量 2.2成員函數 2.2.1尾插和擴容 2.2.2operator[] 2.2.3 迭代器 2…
閱讀更多...
云存儲與云計算詳解

云存儲與云計算詳解

1. 云存儲與云計算概述 1.1 云存儲 云存儲&#xff08;Cloud Storage&#xff09;是指通過互聯網將數據存儲在遠程服務器上&#xff0c;用戶可以隨時隨地訪問和管理這些數據。云存儲的優點包括高可擴展性、靈活性和成本效益。 1.2 云計算 云計算&#xff08;Cloud Computin…
閱讀更多...
前端 控制臺提示invalid date

前端 控制臺提示invalid date

如果你遇到了 "Invalid Date" 的錯誤&#xff0c;這通常意味著傳遞給 Date 構造函數的字符串或數值無法被解析為一個有效的日期。對于時間戳來說&#xff0c;確保它是一個有效的數字&#xff08;表示自1970年1月1日00:00:00 UTC以來的毫秒數&#xff09;。 以下是一…
閱讀更多...
Java如何設計一個功能

Java如何設計一個功能

流程說明:實現一組功能的步驟 1,充分了解需求,包括所有的細節,需要知道要做一個什么樣的功能。 2,設計實體/表 正向工程:設計實體、映射文件 --> 建表 反向工程:設計表 --> 映射文件、實體 設計實體類型分析步驟&#xff1a; 1&#xff09;功能模塊有幾個實體…
閱讀更多...
【Apache Doris】BE宕機問題排查指南

【Apache Doris】BE宕機問題排查指南

【Apache Doris】BE宕機問題排查指南 背景BE宕機分類如何判斷是BE進程是Crash還是OOMBE Crash 后如何排查BE OOM 后如何分析Cache 沒及時釋放導致BE OOM&#xff08;2.0.3-rc04&#xff09; 關于社區 作者&#xff5c;李淵淵 背景 在實際線上生產環境中&#xff0c;大家可能遇…
閱讀更多...
uniapp、微信小程序隱藏頁面滾動條

uniapp、微信小程序隱藏頁面滾動條

閱讀更多...
校園網撥號上網環境下多開虛擬機，實現宿主機與虛擬機互通，并訪問外部網絡

校園網撥號上網環境下多開虛擬機，實現宿主機與虛擬機互通，并訪問外部網絡

校園網某些登錄客戶端只允許同一時間一臺設備登錄&#xff0c;因此必須使用NAT模式共享宿主機的真實IP&#xff0c;相當于訪問外網時只使用宿主機IP&#xff0c;此方式通過虛擬網卡與物理網卡之間的數據轉發實現訪問外網及互通 經驗證&#xff0c;將centos的物理地址與主機物理…
閱讀更多...
有什么好用的語音翻譯軟件推薦？親測實用的語音翻譯工具來了

有什么好用的語音翻譯軟件推薦？親測實用的語音翻譯工具來了

嘿&#xff0c;大家好&#xff01;你們有沒有想過&#xff0c;現在世界這么“小”&#xff0c;我們跟不同國家的人打交道的機會越來越多了。 但是呢&#xff0c;語言不通真是個大問題。別擔心&#xff0c;現在有個超棒的解決方案——語音翻譯技術&#xff01;這玩意兒能實時把…
閱讀更多...
Spring Cloud學習筆記（Nacos）：配置中心基礎和代碼樣例

Spring Cloud學習筆記（Nacos）：配置中心基礎和代碼樣例

這是本人學習的總結&#xff0c;主要學習資料如下 - 馬士兵教育 1、Overview2、樣例2.1、Dependency2.2、配置文件的定位2.3、bootstrap.yml2.4、配置中心新增配置2.5、驗證 1、Overview 配置中心用于管理配置項和配置文件&#xff0c;比如平時寫的application.yml就是配置文件…
閱讀更多...
Python 遍歷字典的方法，你都掌握了嗎

Python 遍歷字典的方法，你都掌握了嗎

Python中的字典是一種非常靈活的數據結構&#xff0c;它允許通過鍵來存儲和訪問值。在處理字典時&#xff0c;經常需要遍歷字典中的元素&#xff0c;以下是幾種常見的遍歷字典的方法。 1. 使用 for 循環直接遍歷字典的鍵 字典的鍵是唯一的&#xff0c;可以直接通過 for 循環來…
閱讀更多...
【Spring Security + OAuth2】OAuth2

【Spring Security + OAuth2】OAuth2

Spring Security OAuth2 第一章 Spring Security 快速入門 第二章 Spring Security 自定義配置 第三章 Spring Security 前后端分離配置 第四章 Spring Security 身份認證 第五章 Spring Security 授權 第六章 OAuth2 文章目錄 Spring Security OAuth21、OAuth2簡介1.1、OAu…
閱讀更多...
call、apply和bind

call、apply和bind

call、apply和bind都是JavaScript中函數對象的方法&#xff0c;用于改變函數的this值。 call&#xff1a;call方法接收一個對象和一系列參數&#xff0c;并立即調用函數&#xff0c;將this值設置為提供的對象。例如&#xff1a; function greet(greeting, punctuation) {cons…
閱讀更多...
Linux驅動開發筆記（二） 基于字符設備驅動的I/O操作

Linux驅動開發筆記（二） 基于字符設備驅動的I/O操作

文章目錄 前言一、設備驅動的作用與本質1. 驅動的作用2. 有無操作系統的區別 二、內存管理單元MMU三、相關函數1. ioremap( )2. iounmap( )3. class_create( )4. class_destroy( ) 四、GPIO的基本知識1. GPIO的寄存器進行讀寫操作流程2. 引腳復用2. 定義GPIO寄存器物理地址 五、…
閱讀更多...
【2024最新華為OD-C卷試題匯總】傳遞悄悄話的最長時間(100分) - 三語言AC題解(Python/Java/Cpp)

【2024最新華為OD-C卷試題匯總】傳遞悄悄話的最長時間(100分) - 三語言AC題解(Python/Java/Cpp)

&#x1f36d; 大家好這里是清隆學長 &#xff0c;一枚熱愛算法的程序員 ? 本系列打算持續跟新華為OD-C卷的三語言AC題解 &#x1f4bb; ACM銀牌&#x1f948;| 多次AK大廠筆試 &#xff5c; 編程一對一輔導 &#x1f44f; 感謝大家的訂閱? 和 喜歡&#x1f497; 文章目錄 前…
閱讀更多...
東哥一句兄弟，你還當真了？

東哥一句兄弟，你還當真了？

關注盧松松&#xff0c;會經常給你分享一些我的經驗和觀點。 你還真把自己當劉強東兄弟了?誰跟你是兄弟了?你在國外的房子又不給我住&#xff0c;你出去旅游也不帶上我!都成人年了&#xff0c;東哥一句客套話&#xff0c;別當真! 今天&#xff0c;東哥在高管會上直言&…
閱讀更多...
mysql內存結構

mysql內存結構

一&#xff1a;邏輯存儲結構&#xff1a;表空間->段->區->頁->行、 表空間&#xff1a;一個mysql實例對應多個表空間&#xff0c;用于存儲記錄&#xff0c;索引等數據。 段&#xff1a;分為數據段&#xff0c;索引段&#xff0c;回滾段。innoDB是索引組織表&…
閱讀更多...
215. 數組中的第K個最大元素（快速排序、堆排序）

215. 數組中的第K個最大元素（快速排序、堆排序）

根據這道題總結一下快速排序和堆排序&#xff0c;再根據這兩種方法寫這道題。 給定整數數組 nums 和整數 k&#xff0c;請返回數組中第 k 個最大的元素。 請注意&#xff0c;你需要找的是數組排序后的第 k 個最大的元素&#xff0c;而不是第 k 個不同的元素。 你必須設計并實…
閱讀更多...
最新文章

Copyright @ 2022~2023