微信小程序?qū)崿F(xiàn)翻牌小功能
更新時(shí)間：2022年04月20日 15:28:14 作者：萌村村花楊小花
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)翻牌小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序翻牌小功能，供大家參考，具體內(nèi)容如下
頁(yè)面
<view id="container">
? ? <view wx:for="{{newArr}}" class='cards'>
? ? ? ? <view class="card card_a" style='display:{{item.showA}}' bindtap='change' data-id='{{item.id}}'>A</view>
? ? ? ? <view class="card card_b" style='display:{{item.showB}}' bindtap='change' data-id='{{item.id}}'>B</view>
? ? </view>
</view>css
#container {
? ? width: 100%;
? ? height: 350rpx;
}
.cards {
? ? width: 350rpx;
? ? height: 100%;
? ? margin: 10rpx;
? ? float: left; ? ?
}
.card {
? ? width: 100%;
? ? height: 100%;
? ? margin: 0 auto;
? ? overflow: hidden;
}
.card_a {
? ? background-color: pink;
}
.card_b {
? ? background-color: green;
}js
Page({
? ? /**
? ? ?* 頁(yè)面的初始數(shù)據(jù)
? ? ?*/
? ? data: {
? ? ? ? newArr: [{
? ? ? ? ? ? ? ? id: 1,
? ? ? ? ? ? ? ? showA: 'block',
? ? ? ? ? ? ? ? showB: 'none',
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? id: 2,
? ? ? ? ? ? ? ? showA: 'block',
? ? ? ? ? ? ? ? showB: 'none',
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? id: 3,
? ? ? ? ? ? ? ? showA: 'block',
? ? ? ? ? ? ? ? showB: 'none',
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? id: 4,
? ? ? ? ? ? ? ? showA: 'block',
? ? ? ? ? ? ? ? showB: 'none',
? ? ? ? ? ? }
? ? ? ? ],
? ? ? ? firstClickId: 0
? ? },
?? ?//點(diǎn)擊切換卡片
? ? change: function(e) {
? ? ? ? var id = e.currentTarget.dataset.id;
? ? ? ? this.data.firstClickId = id;
? ? ? ? var newArr = this.data.newArr;
? ? ? ? //得到當(dāng)前的卡片
? ? ? ? var currentData = newArr[id - 1];
? ? ? ? if (currentData.showA == 'block') {
? ? ? ? ? ? currentData.showA = 'none';
? ? ? ? ? ? currentData.showB = 'block';
? ? ? ? ? ? newArr[id - 1] = currentData;
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? newArr: newArr
? ? ? ? ? ? })
? ? ? ? } else {
? ? ? ? ? ? currentData.showA = 'block';
? ? ? ? ? ? currentData.showB = 'none';
? ? ? ? ? ? newArr[id - 1] = currentData;
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? newArr: newArr
? ? ? ? ? ? })
? ? ? ? }
? ? },
})上面是最簡(jiǎn)單的翻牌效果，是沒(méi)有3d效果的。就是單純的點(diǎn)擊切換。但是是可以點(diǎn)一張切換一張的。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用Bootstrap美化按鈕實(shí)例代碼(demo)
這篇文章主要介紹了使用Bootstrap美化按鈕實(shí)例代碼(demo),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
這篇文章主要為大家介紹了前端手寫功能進(jìn)階的相關(guān)技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
js實(shí)現(xiàn)頁(yè)面轉(zhuǎn)發(fā)功能示例代碼
本文為大家介紹的是使用js實(shí)現(xiàn)頁(yè)面轉(zhuǎn)發(fā)，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
JS組件Bootstrap實(shí)現(xiàn)彈出框和提示框效果代碼
這篇文章主要介紹了JS組件Bootstrap實(shí)現(xiàn)彈出框和提示框效果代碼，對(duì)彈出框和提示框感興趣的小伙伴們可以參考一下2015-12-12
js對(duì)圖片base64編碼字符串進(jìn)行解碼并輸出圖像示例
這篇文章主要介紹了js對(duì)圖片base64編碼字符串進(jìn)行解碼并輸出圖像的具體實(shí)現(xiàn)，大家可以參考下面的示例2014-03-03
如何從零開始利用js手寫一個(gè)Promise庫(kù)詳解
ES2015 推出了JS 的 Promise ，而在沒(méi)有原生支持的時(shí)候，我們也可以使用諸如 Promises/A+ 的庫(kù)的幫助，在我們的代碼里實(shí)現(xiàn)Promise 的支持，下面這篇文章主要給大家介紹了如何從零開始利用js手寫一個(gè)Promise庫(kù)的相關(guān)資料，需要的朋友可以參考下。2018-04-04
javascript實(shí)現(xiàn)json頁(yè)面分頁(yè)實(shí)例代碼
這篇文章主要介紹了javascript實(shí)現(xiàn)json頁(yè)面分頁(yè)實(shí)例代碼,需要的朋友可以參考下2014-02-02
javascript下動(dòng)態(tài)this與動(dòng)態(tài)綁定實(shí)例代碼
javascript是一門動(dòng)態(tài)語(yǔ)言，最明顯就是那個(gè)dynamic this。它一般都是作為函數(shù)調(diào)用者存在。在javascript，所有關(guān)系都可以作為對(duì)象的一個(gè)關(guān)聯(lián)數(shù)組元素而存在。2010-01-01
微信小程序中不同頁(yè)面?zhèn)鬟f參數(shù)的操作方法
這篇文章主要介紹了微信小程序中不同頁(yè)面?zhèn)鬟f參數(shù)的操作方法,在開發(fā)項(xiàng)目中,避免不了不同頁(yè)面之間傳遞數(shù)據(jù)等,那么就需要進(jìn)行不同頁(yè)面之間的一個(gè)數(shù)據(jù)傳遞的,需要的朋友可以參考下2023-12-12
今天小編就為大家分享一篇layui彈出層按鈕提交iframe表單的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08