微信小程式 仿果庫列表

2021-07-24 22:46:01 字數 1777 閱讀 7684

目錄(?)

[+]

布局的實現

邏輯的實現

樣式的實現

效果圖

下面將會按照以下的順序介紹:

布局的實現邏輯的實現樣式的實現

class="home-view1">

class="home-view2">

class="home-image1"

src="">

image>

view>

class="home-text1">小巧可愛的案頭雅物小巧可愛的案頭雅物小巧可愛的案頭雅物小巧可愛的案頭雅物小巧可愛的案頭雅物text>

class="home-view3">

class="home-view4" >

class="home-image-heart"

src="">

image>

class="home-text-heart bgcolor" > 22text>

view>

class="home-text-time" >2016.10.29text>

view>

class="home-view-line">

view>

class="home-view2">

class="home-image1"

src="">

image>

view>

class="home-text1">小巧可愛的案頭雅物小巧可愛的案頭雅物小巧可愛的案頭雅物小巧可愛的案頭雅物小巧可愛的案頭雅物text>

class="home-view3">

class="home-view4" >

class="home-image-heart"

src="">

image>

class="home-text-heart bgcolor" > 22text>

view>

class="home-text-time" >2016.10.29text>

view>

class="home-view-line">

view>

view>

只是註冊了page介面

page(

})

.home-view1樣式:display規定最大view布局為彈性布局,justify-content規定內容居中,豎直排列, …

.home-view3樣式:display規定了資訊欄布局為彈性布局,justify-content規定內容水平平均分配

.home-text1樣式:規定描述文字的樣式,text-align規定文字居中,line-height規定兩行文字之間的高度

.home-text-heart樣式:規定收藏數的樣式,border-radius規定邊界圓角

.home-view-line樣式:是一條分界線

.bgcolor樣式:規定收藏數的背景

.home-view1

.home-view3

.home-view4

.home-image1

.home-image-heart

.home-text1

.home-text-heart

.home-text-time

.home-view-line

.bgcolor

微信小程式仿微信語音

先看一下效果 觸控開始 touchstart function e this.recordermanager.start 觸控結束 touchend function e this.recordermanager.stop console.log 按了 shijian 秒 console.log w...

微信小程式 開發列表

一.知識點 tip wx for array 可以等於引數名,在js中呼叫 page 獲取值 也可以直接把wx for 把值放在上面 1.在元件上使用wx for控制屬性繫結乙個陣列,即可使用陣列中各項的資料重複渲染該元件。預設陣列的當前項的下標變數名預設為index,陣列當前項的變數名預設為ite...

微信小程式 高仿vivo商城

說明 如果你想學vue.js可以來看看我用vue.js寫的乙個 專案 位址在這裡 謝謝大家了 預覽 生命週期函式 監聽頁面載入 onload function options about function 加入購物車 var json require data home data.js page g...