公告列表
公告列表
收藏
回答

关于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下面了

回答关注问题邀请回答
收藏

3 个回答

请 登录 后发表内容
相关问题
相关文档
问题标签
swiper-itemswiperiphonebindtap