本人小白,刚开始学习,在微信的开发者工具上用这几行代码,在左边的模拟器上可以上下滑动,但是使用真机的时候就只显示第一个元素,请各位大佬不吝赐教,

真机是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
}