- 38
- 0
想实现翻牌效果,遇到这样的问题:在初次渲染时,假如display初始值为none,后期通过setdata的方式修改display值为block的时候,对应的区块里面的东西依然不显示,但是如果初始值为block时通过setdata控制显示隐藏则没问题,但是由于需要实现翻牌效果,必然有一个区块需要默认为none,前端新手不知道怎么破,求大神指点,写个小例子,感激不尽#膜拜#
我的代码段:
<block wx:for="{{list}}" wx:key="{{index}}">
<view class="container-body-box-item">
<view class="front" style="display:{{front_display_1}};width:{{front_width_1}}">
<image src="../../images/flipbtn.png" mode="widthFix" bindtap="fliptoback"></image>
//正面内容...
</view>
<view class="back" style="display:{{backt_display_1}};width:{{back_width_1}}">
<image src="../../images/flipbtn.png" mode="widthFix" bindtap="fliptofront"></image>
//背面内容...
</view>
</view>
</block>
由于需要是使用在列表中的,初次渲染,正面都是默认显示,同时width为100%,当点击bindtap时(每个bindtap都设置了dataset:data-front_display_1,data-front_width_1,data-back_display_1,data-back_width_1,这个数字1是循环时候的商品id),正面的width从100%缩小到0,然后display:none;背面则反之
2
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
-︵攒一口袋星星☆ 普通会员 1楼
在小程序中实现翻牌效果时,display渲染的问题主要是由于微信小程序的渲染机制导致的。微信小程序使用的是WXSS(Web风格语言)进行页面渲染,而WXSS的语法中没有display属性,所以我们需要使用CSS进行显示。
解决这个问题的方法是使用微信小程序的组件化设计,将翻牌效果作为一个组件进行封装。这样,在其他页面中就可以直接使用这个组件,而不需要重新编写样式代码。另外,我们还可以使用CSS框架,如Ant Design等,这些框架已经包含了大部分的CSS样式,我们可以直接使用,减少重复编写。
另外,我们还可以使用微信小程序的全局样式表,通过在页面中引入这个样式表,然后在需要的地方使用它,就可以实现翻牌效果的显示。
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
