小程式提供了rpx計量單位

這裡解釋下rpx

把所有介面介面寬度切分成750塊，計算時候取塊計算就達到了寬度適配！

直接貼原始碼

.wxss

page{
    height: 100%;
    width:750rpx;
}
.lunbo{
    width:750rpx;
    height:25%; 
}
.items{
    width: 100%;
    height: 75%;
}
.items .item{
    width:100%;
    height: 100%;
}
.items .item:nth-child(1){
    background: #666;
}
.items .item:nth-child(2){
    background: #999;
}
.items .item:nth-child(3){
    background: #333;
}

畫橫線的為適配必須樣式

.wxml

<!--index.wxml-->
<view id="lunbo"  class="lunbo">
    <swiper indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style="width:100%;height:100%;">
        <block wx:for="{{imgUrls}}">
            <swiper-item >
            <image src="{{item}}" style="width:100%;height:100%;"/>
            </swiper-item>
        </block>
    </swiper>
</view>
<scroll-view scroll-y scroll-into-view="item1" class="items">
    <view id="item1" class="item">
        <view class="item-top">
            
        </view>
    </view>
    <view id="item2" class="item"></view> 
    <view id="item3" class="item"></view> 
    <view id="item4" class="item"></view>   
</scroll-view>

//logs.js
var util = require('../../utils/util.js')


Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true,//是否顯示面板指示點
    autoplay:true,//是否自動切換
    interval: 2000,//自動切換時間間隔
    duration: 1000,//滑動動畫時長
    circular: true,//是否採用銜接滑動
  },
 onload:function(){
   document.getElementById('lunbo');
 }
  
})

.json

{}

4個檔案的程式碼如上ok看下效果

效果在web開發者工具上適配所有提供的機型！！