为什么小程序在IOS上只显示一条数据,?模拟器正常,请大佬们赐教
本人小白,刚开始学习,在微信的开发者工具上用这几行代码,在左边的模拟器上可以上下滑动,但是使用真机的时候就只显示第一个元素,请各位大佬不吝赐教, 真机是IOS系统,代码也是参考网络上的,效果和代码如下: [图片] 真机如图(截图) [图片] 样式代码: page {
height: 100%;
display: flex;
flex-direction: column;
}
.block {
width: 100%;
height: 400rpx;
}
.card {
margin: 10rpx 30rpx;
height: 160rpx;
box-shadow: 8px 0px 14px 4px rgba(52, 152, 255, 0.06);
}
.scroll{
flex: 1;
overflow: scroll;
}
JS: Page({
/**
* 页面的初始数据
*/
data: {
List: ['#3397FF', '#A360EE', '#02B842'],
cardList: [{
name: "card"
}, {
name: "card"
}, {
name: "card"
}, {
name: "card"
}, {
name: "card"
}, {
name: "card"
}]
},
onLoad(options) {
},
taskLower() {
let list = this.data.cardList
for (let i = 0; i < 6; i++) {
list.push({ name: "card"})
}
this.setData({
cardList: list
})
}
})
WXML: <page>
<swiper indicator-dots interval>
<swiper-item wx:for='{{List}}' wx:key='index'>
<view style="background-color: {{item}};" class="block">
</view>
</swiper-item>
</swiper>
<!-- 2.将scroll-view放在一个view中,flex:1 -->
<view class="scroll" style="width: 100vh;">
<scroll-view scroll-y="true" bindscrolltolower="taskLower" style="height:100vh;white-space:pre-wrap;display: block;">
<block wx:for="{{cardList}}" wx:key='index'>
<view class="card">
{{item.name}}{{index}}
</view>
</block>
</scroll-view>
</view>
</page>
JSON: {
"usingComponents": {},
"enablePullDownRefresh": false
}
