微信小程式,介面適配
小程式提供了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開發者工具上適配所有提供的機型!!