大家可以帮我看看怎么回事吗?不知道为什么轮播图显示不出来
代码如下:
<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,原来代码是可以正常显示的
代码片段专用:https://developers.weixin.qq.com/minigame/dev/devtools/minicode.html
你的container里这么写 display: flex;flex-direction:column; 影响了swiper的布局....去掉就行
代码片段不是代码,是微信提供的一个功能,详情请百度
<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里面。
我确实写在了里面,可是这并没有问题,我也是看着视频学的,主要是<swiper>的父节点<view>使用了,
align-items: center;
然后就不会显示出来了
可以做个代码片段吗
代码片段写了,不过和直接写出来有什么不同吗,然后我刚刚试着把循环里面其它都去掉,只留下下面这一段也不行
<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>
代码片段有个分享
这个报错是警告 无关
。。我还不知道怎么分享,这是原来的图片和代码
<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没有东西:
代码片段右上角有个分享
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
找了半天都没找到分享按钮,可能是我测试号的原因