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

swiper在真机中不显示

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug swiper 微信安卓客户端 8.0.32 2.30.1

使用vConsole查看wxml已经渲染数据，但实际页面中不显示。而且线上小程序，就这个页面有问题，其他都正常。

<swiper class='swiper' bindchange='pagechange' current='{{currentIndex}}'> <swiper-item class='swiper'> <!-- 全部 --> <view class="listWarp main h2"> <view class="kBox" style="display:block;text-text-align:center" wx:if="{{orderlist.length == 0}}"> <image style="margin:200rpx auto" src="../../../images/order-empty.png"></image>      <text>暂无订单</text> </view> <scroll-view wx:if="{{orderlist.length > 0}}" scroll-y="true" style="height:90vh" bindscrolltolower="getMore"> <navigator wx:if="{{orderlist}}" url="/pages/me/orderDetail/orderDetail?id={{item.id}}" class='addcard' wx:for="{{orderlist}}"> <view class="flex flex-jus"> <view wx:if="{{item.dragonid!=null}}">接龙号:{{item.dragonid}}</view> <view>{{item.time}}</view> <view wx:if="{{item.status=='0'}}" class="color-price">待支付</view> <view wx:elif="{{item.status=='1'}}" class="color-price">待发货</view> <view wx:elif="{{item.status=='2'}}" class="color-price">已发货</view> <view wx:elif="{{item.status=='3'}}" class="color-price">已完成</view> <view wx:elif="{{item.status=='-1'}}" class="color-price">已取消</view> </view> <view class="flex flex-jus"> <view class='flex flex-star'> <view wx:for="{{item.goods}}" wx:for-item="goods"> <image style="margin-right:15rpx" mode="aspectFill" class="cardimg100" src="{{goods.thumb?goods.thumb:'../../../images/good-img.png'}}"></image> <view style="margin:10rpx 0;font-size:.8rem;width:140rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{goods.goods_name}}</view> </view> </view> <view class="color-garp" style="width:120rpx;text-align:center;"> 共{{item.pieces}}件 </view> </view> <view class="flex flex-jus"> <view></view> <view wx:if="{{item.status=='0'}}">待支付：<text class="color-price h1">{{item.totalPrice}}</text></view> <view wx:if="{{item.status>0}}">实付款：<text class="color-price h1">{{item.totalPrice}}</text></view> <view wx:if="{{item.refundstate>0&&item.refundtime==0}}">售后中</view> <view wx:elif="{{item.status!='-1'&&item.refundtime>0}}">部分退款</view> <view wx:elif="{{item.status=='-1'&&item.refundtime>0}}">已退款</view> </view> <view class='flex flex-jus' wx:if="{{item.status=='0'}}"> <view></view> <view> <text class="btn cancel-btn" catchtap="cancelorder" data-id="{{item.id}}">取消订单</text> <text class="btn color-btn" catchtap="payorder" data-id="{{item.id}}">去支付</text> </view> </view> </navigator> <view class="more"> · 这是我的底线 · </view> </scroll-view> </view> </swiper-item>
回答关注问题邀请回答
收藏

6 个回答

  • young H
    young H
    2023-02-17

    问题已解决，确实是忽略了这个父容器的“container”中的display。

    今天把弄微信小程序swiper的时候发现无法修改什么元素我的swiper都不显示，然后经过排除法，最后发现是我最外层的<view class="container">的锅，因为小程序的默认的app.wxss里面已经修饰了container，display:flex. 

    解决办法：删了这个display：flex 或者修改你的class，不设置为container就行。

    作者：康峻宇

    链接：https://www.jianshu.com/p/27776d2a80f6

    来源：简书

    2023-02-17
    有用
    回复
  • 鑫
    鑫
    2023-02-17

    +1,应该是你的样式问题

    2023-02-17
    有用
    回复 1
    • young H
      young H
      2023-02-17
      谢谢，问题已解决
      2023-02-17
      赞
      回复
  • 睡前原谅一切
    睡前原谅一切
    2023-02-17

    swiper-item 为什么要加absolute。。建议你提供可复现问题的代码片段：https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2023-02-17
    有用
    回复 1
    • young H
      young H
      2023-02-17
      感谢，这个absolute是渲染时自动生成的，但确实是样式问题
      2023-02-17
      赞
      回复
  • showms
    showms
    2023-02-17

    你的样式有问题

    2023-02-17
    有用
    回复 1
    • young H
      young H
      2023-02-17
      感谢，样式问题已解决！
      2023-02-17
      赞
      回复
  • Jianbo
    Jianbo
    发表于小程序端
    2023-02-17

    应该是样式的问题。

    2023-02-17
    有用
    回复 1
    • young H
      young H
      2023-02-17
      感谢，确实是样式问题！
      2023-02-17
      赞
      回复
  • Alisa🌻
    Alisa🌻
    2023-02-16

    检查下样式

    2023-02-16
    有用
    回复 1
    • young H
      young H
      2023-02-17
      感谢回复，确实是样式问题！
      2023-02-17
      赞
      回复
请 登录 后发表内容
相关问题
相关文档