小程式商品詳情彈窗簡陋版 記錄

2021-10-10 15:51:55 字數 3273 閱讀 8865

效果圖:

wxml**:

class

="commodity_screen"

bindtap

="hidemodal"

wx:if

="}"

>

view

>

style

="margin-bottom

:50px

" animation

="}"

class

="commodity_attr_box"

wx:if

="}"

>

scroll-y

="true"

style

="height

:100%;

">

bindtap

="gbtc"

class

="dimage"

src="../../image/delete.png"

>

image

>

style

="display

: flex;

flex-direction

: row;

">

style

="width

:80px;

height

:80px

" src

="../../image/11.png"

>

image

>

style

="display

:flex;

flex-direction

: column;

margin-left

:10px

">

>

}view

>

>

}view

>

>

}view

>

div>

view

>

>

商品屬性text

>

class

='fh_body'

>

style

="padding

: 10rpx;

" wx:for

='}'

wx:key

='}'

>

style

="background-color:

};color:};

" data-index

="}"

class

="fh_item"

bindtap

="alter"

>

}view

>

view

>

view

>

style

="display

:flex;

flex-direction

:row;

float

:right;

margin-right

:15px;

margin-bottom

:5px

">

bindtap

="subtract"

>

-view

>

style

="padding

:3px;

border

:1px solid black;

font-size

:10px

">

}text

>

bindtap

="add"

>

+view

>

view

>

scroll-view

>

view

>

class

="rowlayout"

>

bindtap

="dktc"

>

立即購買button

>

bindtap

="dktc"

>

加入購物車button

>

view

>

wxss**:

/*使螢幕變暗 */

.commodity_screen

/*顯示對話方塊 */

.commodity_attr_box

.rowlayout

.dimage

/*商品屬性樣式*/

.fh_body

.fh_item

js**:

page(,
,,,,

]},//顯示對話方塊

showmodal:

function()

)this

.animation = animation

animation.

translatey

(300).

step()

this

.setdata()

settimeout

(function()

)}.bind

(this),

200)},

//隱藏對話方塊

hidemodal:

function()

)this

.animation = animation

animation.

translatey

(300).

step()

this

.setdata()

settimeout

(function()

)}.bind

(this),

200)},

dktc:

function()

)}, gbtc:

function()

)}, add:

function()

)}else)}

},subtract:

function()

)}else)}

},alter:

function

(e)else

}this

.setdata()}})

小程式引用詳情

wxml 提供兩種檔案引用方式import和include。import可以在該檔案中使用目標檔案定義的template,如 在 item.wxml 中定義了乙個叫item的template 在 index.wxml 中引用了 item.wxml,就可以使用item模板 import 有作用域的概念...

小程式系統api 》彈窗

主要分為四種彈窗 一 showtoast 普通彈出窗 wx.showtoast 在showtoast中 title是必填的屬性 duration 顯示時間 預設1500毫秒 icon 顯示圖示 乙個有三個引數 1.success 2.loading 3.none 其中success是預設值,load...

Python商品購買 小程式

設計乙個程式,完成 英雄 商品的購買 展示商品資訊 折扣 輸入商品 輸入購買數量 提示付款 輸入付款金額 列印購買小票 擴充套件 print print 王者榮耀 折扣3.8折,需要支付28元人民幣 print a int input 請輸入購買數量 b 28 a print print 你購買的 ...