收藏
回答

轮播图实现不了

框架类型 问题类型 操作系统 工具版本
小程序 Bug Windows v1.02.1901230

大家可以帮我看看怎么回事吗?不知道为什么轮播图显示不出来



代码如下:

<view class="container">

<text>我心中的童话</text>

<swiper style='background:#F5F5F5; height:200px;'>

<swiper-item class='movie' wx:for="{{thispages}}">

<image src="{{item.image}}" class="movie-images"></image>

<view class='movie-details'>

<text>第{{index+1}}周的图片</text>

<text style='font-size:60rpx;font-weigth:bold'>{{item.name+item.state}}</text>

<!--<text wx:if="{{flag}}">{{(a+b>3)?"大于3":"不大于3"}}</text>-->

<text hidden="{{!item.flag}}">我有很多宝贝</text>

<text>{{(item.a+item.b>3)?"大于3":"不大于3"}}</text>

</view>

</swiper-item>

</swiper>

</view>



我是把view改成了swiper-item,原来代码是可以正常显示的

最后一次编辑于  2019-01-26
回答关注问题邀请回答
收藏

5 个回答

  • 2019-01-29

    代码片段专用:https://developers.weixin.qq.com/minigame/dev/devtools/minicode.html

    2019-01-29
    有用 1
    回复
  • 菜々
    菜々
    2019-01-30

    你的container里这么写 display: flex;flex-direction:column; 影响了swiper的布局....去掉就行

    2019-01-30
    有用
    回复
  • Peter👊
    Peter👊
    2019-01-29

    代码片段不是代码,是微信提供的一个功能,详情请百度

    2019-01-29
    有用
    回复
  • 啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    2019-01-27
    <swiper
      indicator-dots="{{indicatorDots}}"
      autoplay="{{autoplay}}"
      interval="{{interval}}"
      duration="{{duration}}">
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image" width="355" height="150" />
        </swiper-item>
      </block></swiper>

    <swiper-item class='movie' >

    我估计是因为你把wx:for="{{thispages}}"写在了swiper-item里面。


    2019-01-27
    有用
    回复 1
    • 梦想成真
      梦想成真
      2019-01-27

      我确实写在了里面,可是这并没有问题,我也是看着视频学的,主要是<swiper>的父节点<view>使用了,

      align-items: center;

      然后就不会显示出来了

      2019-01-27
      回复
  • 卢霄霄
    卢霄霄
    2019-01-26

    可以做个代码片段吗

    2019-01-26
    有用
    回复 16
    • 梦想成真
      梦想成真
      2019-01-26

      代码片段写了,不过和直接写出来有什么不同吗,然后我刚刚试着把循环里面其它都去掉,只留下下面这一段也不行

      <swiper>

      <swiper-item class='movie' wx:for="{{thispages}}">

      </swiper-item>

      </swiper>

      控制台就提示下面这段:

      VM1060:5 ./page/tabber02/tabber02.wxml

       Now you can provide attr `wx:key` for a `wx:for` to improve performance.

        2 |   <text>我心中的童话</text>

        3 |   <swiper style='background:#F5F5F5; height:200px;'>

      > 4 |   <swiper-item class='movie' wx:for="{{thispages}}">

          |    ^

        5 |   <image src="{{item.image}}" class="movie-images"></image>

        6 |   <view class='movie-details'>

        7 |   <text>第{{index+1}}周的图片</text>




      2019-01-26
      回复
    • 卢霄霄
      卢霄霄
      2019-01-26回复梦想成真

      代码片段有个分享

      这个报错是警告 无关

      2019-01-26
      回复
    • 梦想成真
      梦想成真
      2019-01-26回复卢霄霄

      。。我还不知道怎么分享,这是原来的图片和代码


      <view class="container">

      <text>我心中的童话</text>

      <view class='movie' wx:for="{{thispages}}">

      <image src="{{item.image}}" class="movie-images"></image>

      <view class='movie-details'>

      <text>第{{index+1}}周的图片</text>

      <text style='font-size:60rpx;font-weigth:bold'>{{item.name+item.state}}</text>

      <!--<text wx:if="{{flag}}">{{(a+b>3)?"大于3":"不大于3"}}</text>-->

      <text hidden="{{!item.flag}}">我有很多宝贝</text>

      <text>{{(item.a+item.b>3)?"大于3":"不大于3"}}</text>

      </view>

      </view>

      </view>



      然后js是这一段:




      data: {

      thispages:[

      { image:"/images/1.jpg",

      a: 5,

      b: 2,

      flag: true,

      name: "哆啦A梦",

      state: "生气了,非常非常生气"

      },

      {

      image: "/images/flower.jpg",

      a: 0,

      b: 8,

      flag: false,

      name: "哆啦A梦",

      state: "喜欢花"

      },

      {

      image: "/images/doctor.jpg",

      a: 0,

      b: 2,

      flag: false,

      name: "哆啦A梦",

      state: "是博士"

      }

      wxss是这一段:

      .about-banner{

      width: 375rpx;

      height: 375rpx;

      border-radius: 50%;

      }

      .container{

      display: flex;

      flex-direction:column;

      justify-content: space-around;

      align-items: center;

      }

      .movie{

      display: flex;

      }

      .movie-details{

      display: flex;

      flex-direction: column;

      width: 550rpx;

      }

      .movie-images{

      width: 200rpx;

      height: 200rpx;

      }

      json没有东西:


      2019-01-26
      回复
    • 卢霄霄
      卢霄霄
      2019-01-26回复梦想成真

      代码片段右上角有个分享

      https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

      2019-01-26
      回复
    • 梦想成真
      梦想成真
      2019-01-26回复卢霄霄

      找了半天都没找到分享按钮,可能是我测试号的原因

      2019-01-26
      回复
    查看更多(11)
登录 后发表内容