账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    小程序中实现翻牌效果时display渲染的问题
    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 条
    • 在小程序中实现翻牌效果时,display渲染的问题主要是由于微信小程序的渲染机制导致的。微信小程序使用的是WXSS(Web风格语言)进行页面渲染,而WXSS的语法中没有display属性,所以我们需要使用CSS进行显示。

      解决这个问题的方法是使用微信小程序的组件化设计,将翻牌效果作为一个组件进行封装。这样,在其他页面中就可以直接使用这个组件,而不需要重新编写样式代码。另外,我们还可以使用CSS框架,如Ant Design等,这些框架已经包含了大部分的CSS样式,我们可以直接使用,减少重复编写。

      另外,我们还可以使用微信小程序的全局样式表,通过在页面中引入这个样式表,然后在需要的地方使用它,就可以实现翻牌效果的显示。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部