block 中 hidden 属性 不隐藏bug 求大神解决
发布于 6 年前 作者 xiuying50 7534 次浏览 来自 问答

test.wxml

<!--好友列表项模板-->
<template name="temp_friend_item">
  <view class="friend_item">a{{isTouchStartSideBar}}</view>
</template>、
 
<!--按字母排序好友列表项模板-->
<template name="letter_sort_friend">
   <view class="letters">b{{isTouchStartSideBar}}</view>
</template>
 
<scroll-view id="scroll_view" class="friend_list_scroll-view" scroll-y scroll-into-view="scroll_{{toView}}" bindtap="event">
  <!-- 正常排序 -->
   <block hidden="{{isTouchStartSideBar}}">{{isTouchStartSideBar}}
   <!-- <block wx:if="{{isTouchStartSideBar}}">{{isTouchStartSideBar}} -->
    <block wx:for="{{friendList}}" wx:for-item="item" wx:key="id">
      <template is="temp_friend_item" data="{{index,item}}"></template>
    </block>
  </block>
  <!-- 按字母排序 -->

  <block wx:else>{{!isTouchStartSideBar}}

 <!-- <block wx:else>{{!isTouchStartSideBar}}  -->

    <block wx:for="{{friendList}}" wx:for-item="obj" wx:key="id">
      <template is="letter_sort_friend" data="{{obj}}"></template>
    </block>
  </block>
</scroll-view>

test.wxss

.friend_list_scroll-view{
  width: 100%;
  height: 1000rpx;
  background-color: yellow;
}
 
.friend_item{
  height: 100rpx;
  background-color: green;
  border: 1rpx solid black;
}
 
.letters{
  height: 100rpx;
  background-color: red;
  border: 1rpx solid black;
}

test.js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    friendList:[1,2,3,4,5,6,7],
    isTouchStartSideBar:false,
  },
 
  event: function(){
    var flag = this.data.isTouchStartSideBar == true ? false : true;
    console.log(flag);
    this.setData({
      isTouchStartSideBar: flag
    });
  }
})

用hidden 没有效果

把hidden注掉，改用wx:if 和 wx:else 显示效果正常

用 wx:if 时 切换显示时效率不行

频繁切换显示时用hidden效率高

1 回复

这里不活跃呀 微信真坑

回到顶部