柚子快報(bào)激活碼778899分享：微信小程序基礎(chǔ)工作模板
柚子快報(bào)激活碼778899分享：微信小程序基礎(chǔ)工作模板
1.輪播圖
點(diǎn)擊跳轉(zhuǎn)官方文檔
簡單例子?
?`
1. indicator-dots="true"： ?? ?* `indicator-dots` 屬性用于控制是否顯示面板指示點(diǎn)。 ?? ?* `true` 表示顯示指示點(diǎn)，即在輪播圖的下方顯示一些小的圓點(diǎn)，每個(gè)圓點(diǎn)代表一個(gè)輪播項(xiàng)，當(dāng)前激活的輪播項(xiàng)對應(yīng)的圓點(diǎn)會(huì)被高亮顯示。 2. autoplay="true"（通常配合interval使用）： ?? ?* `autoplay` 屬性用于控制是否自動(dòng)切換輪播項(xiàng)。 ?? ?* `true` 表示自動(dòng)切換，即輪播圖會(huì)自動(dòng)滾動(dòng)到下一個(gè)輪播項(xiàng)。 3. interval="2000"： ?? ?* `interval` 屬性用于設(shè)置自動(dòng)切換時(shí)間間隔，單位是毫秒（ms）。 ?? ?* 在這個(gè)例子中，`interval="2000"` 表示每過 2000 毫秒（即 2 秒）輪播圖會(huì)自動(dòng)滾動(dòng)到下一個(gè)輪播項(xiàng)。
2.導(dǎo)航
樣式
下面是對這段代碼的詳細(xì)解釋：
.body：
display: flex;：將.body元素的顯示方式設(shè)置為Flexbox布局。Flexbox允許你以簡單、直觀的方式來設(shè)計(jì)和對齊內(nèi)容。flex-wrap: wrap;：這是一個(gè)flex容器的屬性，它決定了當(dāng)子元素的總大小超過容器的大小時(shí)，子元素應(yīng)該如何換行。wrap值意味著子元素將在必要時(shí)換行到下一行。width: 100%;：設(shè)置.body元素的寬度為其父元素寬度的100%。background-color: #ffffff;：設(shè)置.body元素的背景顏色為白色。padding-top: 25rpx;：在.body元素的頂部添加25個(gè)rpx（responsive pixel，響應(yīng)式像素，常用于微信小程序等環(huán)境）的內(nèi)邊距。 .body-item：
display: flex;：同樣，將.body-item元素的顯示方式設(shè)置為Flexbox布局。flex-direction: column;：這是flex容器的屬性，它決定了子元素在主軸上的排列方向。column值意味著子元素將垂直堆疊（從上到下）。justify-content: center;：這是flex容器的屬性，用于在主軸（對于.body-item來說，主軸是垂直的）上對齊子元素。center值意味著子元素將在垂直方向上居中對齊。align-items: center;：這是flex容器的屬性，用于在交叉軸（對于.body-item來說，交叉軸是水平的）上對齊子元素。center值意味著子元素將在水平方向上居中對齊。width: 25%;：設(shè)置.body-item元素的寬度為其父元素寬度的25%。假設(shè).body元素有4個(gè).body-item子元素，并且.body元素的寬度足夠大，那么這四個(gè).body-item元素將并排顯示，每個(gè)占據(jù)一行寬度的四分之一。margin-bottom: 20rpx;：在.body-item元素的底部添加20個(gè)rpx的外邊距。這有助于在垂直方向上分隔不同的.body-item元素。
簡而言之，這段代碼創(chuàng)建了一個(gè)名為.body的flex容器，該容器中的子元素將自動(dòng)換行，并且每個(gè)子元素都將垂直和水平居中對齊，占據(jù)父容器寬度的25%，并在底部有20rpx的外邊距。
3.卡片類（新聞，知識等相似性較強(qiáng)的）
1.在miniprogram創(chuàng)建兩個(gè)文件夾
一個(gè)文件夾，如data，存儲數(shù)據(jù)，一個(gè)文件夾，如templates，在里面做組件
2.data：存儲封面和詳情頁的數(shù)據(jù)
var list = [{
id:'34',
'imgUrl':"../../images/炮仗花.jpg",
'imgUrl2':"../../images/炮仗花 (2).jpg",
title:"名稱：炮仗花",
test:"炮仗花",
viceTest:"別名：鞭炮花",
account:"科類：紫葳科",
value:"藥用價(jià)值：炮仗花有清喉利咽，潤肺止咳的功效，治療肺癆，咽紅腫痛和不論新舊的咳嗽",
precautions:"注意事項(xiàng)：食用要適量",
cooking:"烹飪方式：采摘下來的炮仗花,洗凈,去掉花莖,加入面粉、雞蛋進(jìn)行煎炸"
}]
var summerList = [{
id:'100',
'imgUrl':"../../images/水性楊花.jpg",
'imgUrl2':"../../images/水性楊花 (2).jpg",
title:"名稱：水性楊花",
test:"水性楊花",
viceTest:"別名：海菜花",
value:"食用價(jià)值：水性楊花菜具有輔助中和多余胃酸、促進(jìn)腸道蠕動(dòng)、調(diào)控自身血脂水平的功效",
precautions:"注意事項(xiàng)：不宜同豬肝同食 脾胃虛寒、久泄瀉者少食",
cooking:"烹飪方式：可以涼拌、清炒、煮湯"
}]
var autumnList = [{
id:'201',
'imgUrl':"../../images/白茅根.jpg",
title:"名稱：白茅根",
test:"白茅根",
viceTest:"別名：毛草根、絲茅根",
value:"食用價(jià)值：白毛的花苞可以食用，根可入藥。有涼血止血，清熱通淋的作用",
precautions:"注意事項(xiàng)：對于脾胃虛寒，陽虛寒，腎虛寒出血或嘔血以及陰寒吐瀉等人群不能吃白茅根，容易引發(fā)或加重機(jī)體的不適癥狀",
cooking:"烹飪方式：洗凈即可，可以生食、燉湯，煮水喝"
}]
var winterList = [{
id:'301',
'imgUrl':"../../images/刺老包.jpg",
title:"名稱：刺老包",
test:"刺老包",
viceTest:"別名：楤木、雀不踏、虎陽刺、通刺、黃龍苞",
value:"食用價(jià)值：刺老包具有祛風(fēng)除濕，利水和中，活血解毒等功效，對于風(fēng)濕關(guān)節(jié)痛，腰酸背痛，腎虛水腫，消渴，吐血，瘧疾，深部膿瘍也有一定效果",
precautions:"注意事項(xiàng)：注意適量食用，不要食用過量",
cooking:"烹飪方式：刺老包的吃法也多種多樣，可以炒食、做湯、腌菜、裹面糊油炸等等"
}]
module.exports.list = list;
module.exports.summerList = summerList;
module.exports.autumnList = autumnList;
module.exports.winterList = winterList;
?module.exports.list = list;?
創(chuàng)建一個(gè)名為?list?的屬性在?module.exports?對象上。將?list?變量（或?qū)ο蟮闹担┓峙浣o?module.exports.list。
3. 制造一個(gè)名為card的組件
4.引入模板
* `wx:for="{{list}}"`: 這是一個(gè)列表渲染指令。它告訴小程序遍歷`list`數(shù)組，并為數(shù)組中的每個(gè)元素創(chuàng)建一個(gè)`
/* wxss引入模板 */
@import '../../templates/KnowledgeCards/KnowledgeCards.wxss';
// pages/spring/index.js
//引入其他模塊
var list = require('../../data/cardList.js')
Page({
data: {
list:list.list
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad(options) {
console.log(list);
},
//跳轉(zhuǎn)頁面---詳情頁
tiao:function(e) {
console.log(e.currentTarget.dataset.mark)
wx.navigateTo({
url: '../detail/detail?mark=' + e.currentTarget.dataset.mark,
})
},
})
5.詳情頁 ，點(diǎn)擊封面達(dá)到跳轉(zhuǎn)對應(yīng)數(shù)據(jù)的效果，只需做一個(gè)detail設(shè)計(jì)
* `bindtap="tiao"`: 當(dāng)用戶點(diǎn)擊這個(gè)`
tiao:function(e) {
console.log(e.currentTarget.dataset.mark)
wx.navigateTo({
url: '../detail/detail?mark=' + e.currentTarget.dataset.mark,
})
},
?
?
?
?
?
柚子快報(bào)激活碼778899分享：微信小程序基礎(chǔ)工作模板
精彩內(nèi)容
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
MyMall優(yōu)選外貿(mào)棧
