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