微信小程式各種優惠券選中操作功能以及樣式

2021-08-27 18:15:20 字數 825 閱讀 8123

1.案例圖如下:

要求:各個優惠券為單選操作,優惠券過多時在一定高度內實現上下滑動,並且去掉滑動操作的滾動條

知識點1:優惠券單選的樣式

知識點2:滑動操作

知識點3:去掉滑動操作滾動條

解決樣式:乙個radio-group,然後包含乙個radio

名字

100 元

2023年

css**:直接貼上到wxss中

/*  重寫 radio 樣式  */

/* 未選中的 背景樣式 */

radio .wx-radio-input

/* 選中後的 背景樣式 (紅色背景 無邊框 可根據ui需求自己修改) */

radio .wx-radio-input.wx-radio-input-checked

/* 選中後的 對勾樣式 (白色對勾 可根據ui需求自己修改) */

radio .wx-radio-input.wx-radio-input-checked::before

滑動操作:

中間是內容 

去掉滑動條,直接將下面css**貼上到wxss中即可

小程式優惠券樣式

效果 wxml 100新人專享全場滿199減30 優惠券編號 264669616164 優惠券2018 01 17 2018 01 25 立即領取 100新人專享全場滿199減30 優惠券編號 264669616164 優惠券2018 01 17 2018 01 25 立即領取 100新人專享全場滿...

小程式列表頁製作優惠券效果

先看效果 全部 class coupon list for wx key data id class item stamp stamp01 data id bindtap getcoupon class float li t1 class coupon left class t5 票 class t...

微信小程式 卡券開發(前端)

因為我只負責了前端。所以下面主要是前端的工作。點選首頁的某處按鈕,點選後,呼叫wx.opencard 介面,開啟已領取的卡券列表頁。如果點選了返回,沒有點選 領取到卡包 此時是沒有領取成功的。3 開發流程 後續補充 1 獲取openid。領取卡券的前端處理 if wx.addcard else 呼叫...