收藏
回答

关于swiper在苹果手机上的bug?

<!--消息页面 -->
<!-- 顶部tab栏,可以切换“消息中心”和“联系人”,默认显示消息中心 -->
<view class='msg-tab swiperTab'>
  <view class="tab-msg swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">消息中心</view>
  <view class="tab-people swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">联系人</view>
</view>
 
<!-- 消息中心 -->
<view style="width:100%;height:100%;">
  <swiper current="{{currentTab}}" bindchange="swiperTab" class='swiper-contacts' style='height:{{minfixheight}}rpx'>
 
    <swiper-item style="margin-top: 75rpx;" item-id='0'>
      <view style='background-color:#fff;border-top:1rpx solid #ddd;'>
        <block wx:for="{{msg_list}}" wx:key="id" wx:for-item="item">
          <view class="weui-cell weui-cell_access contact-item" hover-class="weui-cell_active" style='padding:20rpx 20rpx;' bindtap="listTochat" data-item="{{item}}">
            <view class='contact-msg'>
              <view style="width:13%;  display: flex;flex-direction: row;">
                <image src='{{item.friend_picture}}' class='contact-icon' catchtap='show_information' data-item="{{item}}"></image>
                <view wx:if='{{item.msg_arr[item.msg_arr.length-1].unread == 0}}' style="background-color:red;height:16rpx;width:16rpx;border-radius:16rpx;color:red;z-index:99;margin-left:-16rpx;"></view>
              </view>
              <view style='display:flex;flex-direction: column;padding-left:6rpx;width:87%;'>
                <view style='display:flex;flex-direction: row;'>
                  <text class='contact-name'>{{item.friend_name}}</text>
                </view>
                <text class='contact-phone'>{{item.msg_arr[item.msg_arr.length-1].content?item.msg_arr[item.msg_arr.length-1].content:item.msg_arr[item.msg_arr.length-1].Content}}</text>
              </view>
            </view>
            <!-- <view class='iconfont icon-dianhua phone-icon' catchtap="calling" data-phone_num='{{user.phone}}'></view> -->
          </view>
        </block>
      </view>
    </swiper-item>
 
    <!-- 联系人 -->
    <swiper-item  style="margin-top: 75rpx;" item-id='1'>
      <view class='contacts'>
        <view class="weui_cells weui-cells_after-title">
 
          <block wx:for="{{friends}}" wx:key="groupId">
            <view class="weui-cell weui-cell_access department" hover-class="weui-cell_active" bindtap='spread' data-spread='{{index}}' data-friends='{{friends}}' data-minfixheight='{{minfixheight}}'>
              <view class='president-icon iconfont {{item.icon}}'></view>
              <view class="weui-cell__bd todo-task">{{item.name}}
                <text class='num'>({{item.list.length}})</text>
              </view>
              <view class='unfold' style='transform: rotate({{item.isspread?"135deg":"45deg"}});'></view>
            </view>
            <view class="weui-cell weui-cell_access groups-contents0 {{item.isspread&&item.list.length!=0?'open':'close'}}">
 
              <block wx:for="{{item.list}}" wx:key="id" wx:for-item="user">
                <view class="weui-cell weui-cell_access contact-item" hover-class="weui-cell_active" style='padding:0px 20rpx;margin-left:20rpx;' bindtap="contactTochat" data-item="{{user}}">
                  <view class='contact-person'>
                    <image src='{{user.picture}}' class='contact-icon' catchtap='show_information' data-item="{{user}}"></image>
                    <view style='display:flex;flex-direction: column;margin-left:20rpx;'>
                      <view style='display:flex;flex-direction: row;'>
                        <text class='contact-name'>{{user.name}}</text>
                        <text style='font-size: 28rpx;color: #888;line-height:54rpx;'> ({{user.job_name}})</text>
                      </view>
                      <text class='contact-phone'>{{user.phone}}</text>
                    </view>
                  </view>
                  <view class='iconfont icon-dianhua phone-icon' catchtap="calling" data-phone_num='{{user.phone}}'></view>
                </view>
              </block>
            </view>
          </block>
 
        </view>
      </view>
    </swiper-item>
  </swiper>
</view>
//滑动切换
 swiperTab: function(e) {
   var that = this;
   that.setData({
     currentTab: e.detail.current
   });
   if (this.noswiper) {
     if (e.detail.current == 1) {
       this.getFriends();
 
     } else {
       this.getConversations();
     }
   }
   this.noswiper = true;
 
 },
 
 //点击切换
 clickTab: function(e) {
   var that = this;
   this.noswiper = false;
   if (this.data.currentTab == e.target.dataset.current) { //点击的是当前选项卡,则点击不生效
     return false;
   } else { //点击其他选项卡,切换显示
     that.setData({
       currentTab: e.target.dataset.current
     });
 
     if (e.target.dataset.current == 1) {
       this.getFriends();
     } else {
       this.getConversations();
     }
 
   }
 },


这是开发者工具中的效果,也是安卓手机的效果,也是预想中的效果,但是在苹果手机中右边swiper-item的列表直接拼接在左边swiper-item下面了

最后一次编辑于  10-22
回答关注问题邀请回答
收藏

2 个回答

  • 哥头
    哥头
    10-22

    https://developers.weixin.qq.com/s/9fQ4yimi7Tcw这个是代码片段,这个在开发者工具上是没有任何问题的,在安卓手机也没问题,但是在苹果手机会有bug,因为这个代码片段无法在手机端调试,所以,我尽量跟原来的代码一样了,可以试试导入这个代码片段到一个小程序看能不能在苹果手机重现这个bug

    10-22
    赞同
    回复
  • var 友原
    var 友原
    10-22

    做个代码片段看下

    10-22
    赞同
    回复 13
    查看更多(8)
问题标签