关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

微信小程序界面适配

发布时间:2019-11-30 10:36:14

小程序提供了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');

 }

})


/template/Home/Zkeys/PC/Static