block 中 hidden 属性 不隐藏bug 求大神解决

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效率高