uni-app初學

文章目錄

  • 1. pages.json 頁面路由
  • 2. 圖標
  • 3. 全局 CSS
  • 4. 首頁
    • 4.1 整體框架
    • 4.2 完整代碼
    • 4.3 輪播圖 swiper
      • 4.3.1 image
    • 4.4 公告
      • 4.4.1 uni-icons
    • 4.5 分類 uni-row、uni-col
    • 4.6 商品列表

小程序開發網址:

注冊小程序賬號
微信開發者工具下載
uniapp 官網
HbuilderX 下載
色彩網站
圖標網站
Postimage-免費轉換圖片比例

效果圖:

在這里插入圖片描述

1. pages.json 頁面路由

pages.json 文件用來對 uni-app 進行全局配置,決定頁面文件的路徑、窗口樣式、原生的導航欄、底部的原生tabbar 等。

{"pages": [ //pages數組中第一項表示應用啟動頁,參考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "首頁"}},{"path" : "pages/category/category","style" : {"navigationBarTitleText" : "分類"}},{"path" : "pages/user/user","style" : {"navigationBarTitleText" : "我的"}}],"globalStyle": {"navigationBarTextStyle": "white","navigationBarTitleText": "校園小程序","navigationBarBackgroundColor": "#3cb371","backgroundColor": "#F8F8F8"},"uniIdRouter": {},"tabBar": {"selectedColor": "#3cb371","list": [{"pagePath": "pages/index/index","iconPath": "/static/icons/首頁.png","selectedIconPath": "/static/icons/首頁-高亮.png","text": "首頁"},{"pagePath": "pages/category/category","iconPath": "/static/icons/分類.png","selectedIconPath": "/static/icons/分類-高亮.png","text": "分類"},{"pagePath": "pages/user/user","iconPath": "/static/icons/我的.png","selectedIconPath": "/static/icons/我的-高亮.png","text": "我的"}]}
}
  • pages:設置頁面路徑及窗口表現
    • path:配置頁面路徑
    • style:配置頁面窗口表現
      • navigationBarTitleText:導航欄標題文字內容
    • needLogin:是否需要登錄才可訪問
  • globalStyle:設置默認頁面的窗口表現
    • navigationBarTextStyle:導航欄標題顏色及狀態欄前景顏色,僅支持 black/white
    • navigationBarTitleText:導航欄標題文字內容
    • navigationBarBackgroundColor:導航欄背景顏色
    • backgroundColor:窗口的背景色
  • tabBar:設置底部 tab 的表現
    • color:tab 上的文字默認顏色
    • selectedColor:tab 上的文字選中時的顏色
    • list:tab 的列表,詳見 list 屬性說明,最少2個、最多5個 tab
      • pagePath:頁面路徑,必須在 pages 中先定義
      • iconPath:圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px
      • selectedIconPath:選中時的圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px
      • text:tab 上按鈕文字

2. 圖標

1、訪問 圖標網站,搜索選擇喜歡的圖標
在這里插入圖片描述
在這里插入圖片描述

2、點擊作者
在這里插入圖片描述

3、點擊圖標集
在這里插入圖片描述

4、選擇所有需要的圖標
在這里插入圖片描述

5、加入購物車
在這里插入圖片描述

6、添加到個人項目中
在這里插入圖片描述

7、個人主頁 > 我的項目
在這里插入圖片描述

8、下載所需圖標
在這里插入圖片描述

9、選擇顏色,下載灰色圖標,做為未選中時圖標。
在這里插入圖片描述

10、選擇綠色,下載綠色圖標,做為選中時圖標。
在這里插入圖片描述

3. 全局 CSS

global.css:

page {background-color: #f2f3f4;min-height: 100vh;
}
* {box-sizing: border-box;
}

設置背景色為灰色。

4. 首頁

4.1 整體框架

在這里插入圖片描述

4.2 完整代碼

<template><view><!-- 輪播圖 --><view><swiper circular autoplay :interval="3000" :duration="500" indicator-dots style="height: 350rpx;"indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#3CB371"><swiper-item v-for="item in imgs" :key="item" ><image :src="item" alt="" mode="widthFix" style="width: 100%;" /></swiper-item></swiper></view><!-- 公告 --><view style="margin: 10px;"><view style="padding: 5px 10px; background-color: white; font-size: 12px; border-radius: 5px; display: flex; align-items: center;"><uni-icons type="sound" size="20"></uni-icons><view>{{ notice }}</view></view></view><!-- 分類 --><view style="margin: 10px; padding: 5px 10px; background-color: white; border-radius: 5px;"><uni-row><uni-col :span="6"><view class="grid-item-box" @click="clickItem('時令水果')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/時令水果.png"></image><text style="font-size: 13px; margin-top: 5px;">時令水果</text></view></uni-col><uni-col :span="6"><view class="grid-item-box" @click="clickItem('品質肉禽')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/品質肉禽.png"></image><text style="font-size: 13px; margin-top: 5px;">品質肉禽</text></view></uni-col><uni-col :span="6"><view class="grid-item-box" @click="clickItem('新鮮水產')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/新鮮水產.png"></image><text style="font-size: 13px; margin-top: 5px;">新鮮水產</text></view></uni-col><uni-col :span="6"><view class="grid-item-box" @click="clickItem('蔬菜蛋品')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/蔬菜蛋品.png"></image><text style="font-size: 13px; margin-top: 5px;">蔬菜蛋品</text></view></uni-col></uni-row></view><!-- 商品列表 --><view style="margin: 10px; font-size: 12px;"><uni-row :gutter='10'><uni-col :span='12' v-for="item in goodsList" :key="item.name"><view style="margin-bottom: 5px; background-color: white; padding: 10px; border-radius: 10px;"><image :src="item.img" mode="widthFix" style="width: 100%;"></image><view class="lineEllipsis">{{ item.name }}</view><view style="color: red; margin-top: 5px; font-weight: bold; font-size: 14px;">¥{{ item.price }}</view><view style="text-align: right;"><uni-icons type="plus" size="25" style="color: #666;" @click="addShoppingCart(item)"></uni-icons></view></view></uni-col></uni-row></view></view>
</template><script>export default {data() {return {imgs: ['https://m.360buyimg.com/babel/jfs/t20260719/200274/27/38564/103066/64b8a92bF9ff64827/86b0873317ff1670.jpg','https://m.360buyimg.com/babel/jfs/t20260720/127672/11/35840/78112/64ba27ceF7f110966/ec2e2c6c366fa94c.jpg','https://m.360buyimg.com/babel/jfs/t20260713/161699/23/38353/136417/64b0a7dbF5e25fcdd/ba43ddee33949c1c.png',],notices: [{content: "時令水果今日半價"},{content: "百億補貼限時搶購"},{content: "9塊9特賣專場"},],notice: '',goodsList: [{ name: '固倫天原 農家土雞蛋現撿新鮮谷物蟲草柴雞蛋初生蛋簡裝 20枚裝', price: 19.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/147254/20/37798/87316/6458689bF5bb085ce/f1177ea39ce03322.jpg' },{ name: '大口鮮 熟凍帝王蟹禮盒裝 海鮮禮包 整只 3.2-3.6斤現貨 海產禮盒', price: 79.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/210206/31/4285/246694/61614b6bE8e495865/1b801854736d9736.jpg' },{ name: '仙泉湖三去星洲紅 500g*1條 凈膛冷凍羅非魚海鮮食材 刺少', price: 99.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/139489/10/25554/185007/61d68c23Eef30e5c7/86fac8623b27de32.jpg' },{ name: '洛川蘋果80mm大果 凈重4.2斤 陜西延安紅富士新鮮時令生鮮水果', price: 19.9,img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/206463/33/3190/152008/6155d86eE00924ef0/8e955e07ea8d1942.jpg' },{ name: '妙果櫻廣西青芒新鮮水果大青芒果當季時令生鮮芒果 3斤大果(單果250g+)', price: 29.9,img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/142695/20/37414/69619/64b8d41bF0e06aea0/8961fde6fe2b619b.jpg' },]}},onLoad() {this.loadNotice();},methods: {loadNotice() {let i = 0this.notice = this.notices[i++].contentsetInterval(() => {this.notice = this.notices[i++].contentif (i === this.notices.length) {i = 0}}, 5000)},// 點擊分類,跳轉頁面clickItem(name) {console.log(name)},// 點擊添加到購物車addShoppingCart(item) {console.log(item.name)}}}
</script><style>.grid-item-box {display: flex;flex-direction: column;align-items: center;justify-content: center;}.lineEllipsis {word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;/* 超出幾行省略 */overflow: hidden;}
</style>

4.3 輪播圖 swiper

在這里插入圖片描述

詳見官網 滑塊視圖容器

<view><swiper circular autoplay :interval="3000" :duration="500" indicator-dots style="height: 350rpx;"indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#3CB371"><swiper-item v-for="item in imgs" :key="item" ><image :src="item" alt="" mode="widthFix" style="width: 100%;" /></swiper-item></swiper>
</view>imgs: ['https://m.360buyimg.com/babel/jfs/t20260719/200274/27/38564/103066/64b8a92bF9ff64827/86b0873317ff1670.jpg','https://m.360buyimg.com/babel/jfs/t20260720/127672/11/35840/78112/64ba27ceF7f110966/ec2e2c6c366fa94c.jpg','https://m.360buyimg.com/babel/jfs/t20260713/161699/23/38353/136417/64b0a7dbF5e25fcdd/ba43ddee33949c1c.png',
]
  • circular :是否采用銜接滑動,即播放到末尾后重新回到開頭
  • autoplay :是否自動切換
  • interval:自動切換時間間隔
  • duration:滑動動畫時長
  • indicator-dots:是否顯示面板指示點
  • indicator-color:指示點顏色
  • indicator-active-color:當前選中的指示點顏色

4.3.1 image

  • src:圖片資源地址
  • mode:圖片裁剪、縮放的模式。widthFix:寬度不變,高度自動變化,保持原圖寬高比不變

4.4 公告

在這里插入圖片描述

<view style="margin: 10px;"><view style="padding: 5px 10px; background-color: white; font-size: 12px; border-radius: 5px; display: flex; align-items: center;"><uni-icons type="sound" size="20"></uni-icons><view>{{ notice }}</view></view>
</view>notices: [{content: "時令水果今日半價"},{content: "百億補貼限時搶購"},{content: "9塊9特賣專場"},
],
notice: '',loadNotice() {let i = 0this.notice = this.notices[i++].contentsetInterval(() => {this.notice = this.notices[i++].contentif (i === this.notices.length) {i = 0}}, 5000)
}onLoad() {this.loadNotice();
}

4.4.1 uni-icons

下載安裝 擴展組件 uni-icons
在這里插入圖片描述

在這里插入圖片描述

4.5 分類 uni-row、uni-col

在這里插入圖片描述

<view style="margin: 10px; padding: 5px 10px; background-color: white; border-radius: 5px;"><uni-row><uni-col :span="6"><view class="grid-item-box" @click="clickItem('時令水果')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/時令水果.png"></image><text style="font-size: 13px; margin-top: 5px;">時令水果</text></view></uni-col>... 省略</uni-row>
</view>clickItem(name) {console.log(name)
}.grid-item-box {display: flex;flex-direction: column;align-items: center;justify-content: center;
}
  • uni-row:流式柵格系統,隨著屏幕或視口分為 24 份,可以迅速簡便地創建布局
  • span:柵格占據的列數
  • display: flex; :使圖片和文字垂直居中。
  • width: 50%; :圖片排版更好看。
  • @click=“clickItem(‘時令水果’)”:點擊事件可以用于跳轉頁面。

4.6 商品列表

在這里插入圖片描述

<view style="margin: 10px; font-size: 12px;"><uni-row :gutter='10'><uni-col :span='12' v-for="item in goodsList" :key="item.name"><view style="margin-bottom: 5px; background-color: white; padding: 10px; border-radius: 10px;"><image :src="item.img" mode="widthFix" style="width: 100%;"></image><view class="lineEllipsis">{{ item.name }}</view><view style="color: red; margin-top: 5px; font-weight: bold; font-size: 14px;">¥{{ item.price }}</view><view style="text-align: right;"><uni-icons type="plus" size="25" style="color: #666;" @click="addShoppingCart(item)"></uni-icons></view></view></uni-col></uni-row>
</view>goodsList: [{ name: '固倫天原 農家土雞蛋現撿新鮮谷物蟲草柴雞蛋初生蛋簡裝 20枚裝', price: 19.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/147254/20/37798/87316/6458689bF5bb085ce/f1177ea39ce03322.jpg' },{ name: '大口鮮 熟凍帝王蟹禮盒裝 海鮮禮包 整只 3.2-3.6斤現貨 海產禮盒', price: 79.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/210206/31/4285/246694/61614b6bE8e495865/1b801854736d9736.jpg' },{ name: '仙泉湖三去星洲紅 500g*1條 凈膛冷凍羅非魚海鮮食材 刺少', price: 99.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/139489/10/25554/185007/61d68c23Eef30e5c7/86fac8623b27de32.jpg' },{ name: '洛川蘋果80mm大果 凈重4.2斤 陜西延安紅富士新鮮時令生鮮水果', price: 19.9,img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/206463/33/3190/152008/6155d86eE00924ef0/8e955e07ea8d1942.jpg' },{ name: '妙果櫻廣西青芒新鮮水果大青芒果當季時令生鮮芒果 3斤大果(單果250g+)', price: 29.9,img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/142695/20/37414/69619/64b8d41bF0e06aea0/8961fde6fe2b619b.jpg' },
]addShoppingCart(item) {console.log(item.name)
}.lineEllipsis {word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;/* 超出幾行省略 */overflow: hidden;
}
  • gutter:柵格間隔
  • width: 100%;:圖片填充整個柵格
  • .lineEllipsis :文字超出 2 行進行省略處理
  • addShoppingCart:點擊添加到購物車

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

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

相關文章

VBA將Word文檔內容逐行寫入Excel

如果你需要將Word文檔的內容導入Excel工作表來進行數據加工&#xff0c;使用下面的代碼可以實現&#xff1a; Sub ImportWordToExcel()Dim wordApp As Word.ApplicationDim wordDoc As Word.DocumentDim excelSheet As WorksheetDim filePath As VariantDim i As LongDim para…

MySQL運行一段時間后磁盤出現100%讀寫

MySQL運行一段時間后磁盤出現100%讀寫的情況&#xff0c;可能是由多種原因導致的&#xff0c;以下是一些常見原因及解決方法&#xff1a; 可能的原因 1. 磁盤I/O壓力過大[^0^]&#xff1a;數據量過大&#xff0c;數據庫查詢和寫入操作消耗大量I/O資源。索引效率低&#xff0c…

【RabbitMQ】延遲隊列

1.概述 延遲隊列其實就是隊列里的消息是希望在指定時間到了以后或之前取出和處理&#xff0c;簡單來說&#xff0c;延時隊列就是用來存放需要在指定時間被處理的元素的隊列。 延時隊列的使用場景&#xff1a; 1.訂單在十分鐘之內未支付則自動取消 2.新創建的店鋪&#xff0c;…

Linux筆記之Ubuntu系統設置自動登錄tty1界面

Ubuntu22.04系統 編輯getty配置文件 vim /etc/systemd/system/gettytty1.service.d/override.conf如果該目錄或者文件不存在&#xff0c;進行創建。 在override.conf文件中進行編輯&#xff1a; [Service] ExecStart ExecStart-/sbin/agetty --autologin yourusername --no…

C++程序詩篇的靈動賦形:多態

文章目錄 1.什么是多態&#xff1f;2.多態的語法實現2.1 虛函數2.2 多態的構成2.3 虛函數的重寫2.3.1 協變2.3.2 析構函數的重寫 2.4 override 和 final 3.抽象類4.多態原理4.1 虛函數表4.2 多態原理實現4.3 動態綁定與靜態綁定 5.繼承和多態常見的面試問題希望讀者們多多三連支…

算法訓練之動態規劃(三)

???~~~~~~歡迎光臨知星小度博客空間~~~~~~??? ???零星地變得優秀~也能拼湊出星河~??? ???我們一起努力成為更好的自己~??? ???如果這一篇博客對你有幫助~別忘了點贊分享哦~??? ???如果有什么問題可以評論區留言或者私信我哦~??? ?????? 個…

$_GET變量

$_GET 是一個超級全局變量&#xff0c;在 PHP 中用于收集通過 URL 查詢字符串傳遞的參數。它是一個關聯數組&#xff0c;包含了所有通過 HTTP GET 方法發送到當前腳本的變量。 預定義的 $_GET 變量用于收集來自 method"get" 的表單中的值。 從帶有 GET 方法的表單發…

jQuery多庫共存

在現代Web開發中&#xff0c;項目往往需要集成多種JavaScript庫或框架來滿足不同的功能需求。然而&#xff0c;當多個庫同時使用時&#xff0c;可能會出現命名沖突、功能覆蓋等問題。幸運的是&#xff0c;jQuery提供了一些機制來確保其可以與其他庫和諧共存。本文將探討如何實現…

MySQL 中的聚簇索引和非聚簇索引有什么區別?

MySQL 中的聚簇索引和非聚簇索引有什么區別&#xff1f; 1. 從不同存儲引擎去考慮 在MySIAM存儲引擎中&#xff0c;索引和數據是分開存儲的&#xff0c;包括主鍵索引在內的所有索引都是“非聚簇”的&#xff0c;每個索引的葉子節點存儲的是數據記錄的物理地址&#xff08;指針…

Java從入門到“放棄”(精通)之旅——啟航①

&#x1f31f;Java從入門到“放棄 ”精通之旅&#x1f680; 今天我將要帶大家一起探索神奇的Java世界&#xff01;希望能幫助到同樣初學Java的你~ (??????)?? &#x1f525; Java是什么&#xff1f;為什么這么火&#xff1f; Java不僅僅是一門編程語言&#xff0c;更…

三相電為什么沒零線也能通電

要理解三相電為什么沒零線也能通電&#xff0c;就要從發電的原理說起 1、弧形磁鐵中加入電樞&#xff0c;旋轉切割磁感線會產生電流 隨著電樞旋轉的角度變化&#xff0c;電樞垂直切割磁感線 電樞垂直切割磁感線&#xff0c;此時會產生最大電壓 當轉到與磁感線平行時&#xf…

文件上傳做題記錄

1&#xff0c;[SWPUCTF 2021 新生賽]easyupload2.0 直接上傳php 再試一下phtml 用蟻劍連發現連不上 那就只要命令執行了 2&#xff0c;[SWPUCTF 2021 新生賽]easyupload1.0 當然&#xff0c;直接上傳一個php是不行的 phtml也不行&#xff0c;看下是不是前端驗證&#xff0c;…

【Pandas】pandas DataFrame head

Pandas2.2 DataFrame Indexing, iteration 方法描述DataFrame.head([n])用于返回 DataFrame 的前幾行 pandas.DataFrame.head pandas.DataFrame.head 是一個方法&#xff0c;用于返回 DataFrame 的前幾行。這個方法非常有用&#xff0c;特別是在需要快速查看 DataFrame 的前…

日語學習-日語知識點小記-構建基礎-JLPT-N4階段(1):承上啟下,繼續上路

日語學習-日語知識點小記-構建基礎-JLPT-N4階段(1):承上啟下,繼續上路 1、前言(1)情況說明(2)工程師的信仰2、知識點(1)普通形(ふつうけい)と思います(2)辭書形ことができます(3)Vたことがあります。(4)Vた とき & Vる とき3、單詞(1)日語單詞(2…

碼率自適應(ABR)相關論文閱讀簡報

標題&#xff1a;Quality Enhanced Multimedia Content Delivery for Mobile Cloud with Deep Reinforcement Learning 作者&#xff1a;Muhammad Saleem , Yasir Saleem, H. M. Shahzad Asif, and M. Saleem Mian 單位: 巴基斯坦拉合爾54890工程技術大學計算機科學與工程系 …

匯編語言:指令詳解

零、前置知識 1、數據類型修飾符 名稱解釋byte一個字節&#xff0c;8bitword單字&#xff0c;占2個字節&#xff0c;16bitdword雙字&#xff0c;占4個字節&#xff0c;32bitqword四字&#xff0c;占8個字節&#xff0c;64bit 2、關鍵詞解釋 ptr&#xff1a;它代表 pointer&a…

藍橋杯c ++筆記(含算法 貪心+動態規劃+dp+進制轉化+便利等)

藍橋杯 #include <iostream> #include <vector> #include <algorithm> #include <string> using namespace std; //常使用的頭文件動態規劃 小藍在黑板上連續寫下從 11 到 20232023 之間所有的整數&#xff0c;得到了一個數字序列&#xff1a; S12345…

【C++算法】54.鏈表_合并 K 個升序鏈表

文章目錄 題目鏈接&#xff1a;題目描述&#xff1a;解法C 算法代碼&#xff1a; 題目鏈接&#xff1a; 23. 合并 K 個升序鏈表 題目描述&#xff1a; 解法 解法一&#xff1a;暴力解法 每個鏈表的平均長度為n&#xff0c;有k個鏈表&#xff0c;時間復雜度O(nk^2) 合并兩個有序…

Java中的注解技術講解

Java中的注解&#xff08;Annotation&#xff09;是一種在代碼中嵌入元數據的機制&#xff0c;不直接參與業務邏輯&#xff0c;而是為編譯器、開發工具以及運行時提供額外的信息和指導。下面我們將由淺入深地講解Java注解的概念、實現原理、各種應用場景&#xff0c;并通過代碼…

京東與喜茶關系破裂:切斷所有合作 禁止進入辦公場所

快科技4月10日消息&#xff0c;據報道&#xff0c;京東集團近日被曝出內部下發全員禁令&#xff0c;全面封殺喜茶產品進入辦公區域。 據知情人士透露&#xff0c;京東人力行政部門發布的通知明確規定&#xff1a;全國各職場禁止與喜茶品牌開展任何形式的合作&#xff1b;員工不…