zoukankan      html  css  js  c++  java
  • 微信小程序swiper 前后边距的使用

    小程序中有一个组件swiper 就是滑块视图容器

    其中提供了两个属性

      previous-margin:前边距,可用于露出前一项的一小部分

            next-margin:后边距,可用于露出后一项的一小部分

    假设设置 一个view的尺寸为宽为600rpx,高为600rpx,前边距为30rpx,后边距为30rpx,最终呈现结果是这样的

    图一和图二

           

    图三

     这是将图片尺寸设置跟屏幕宽一样的尺寸,然后就没有之间的空白间隙了,所有得为图片加上空白间距

     

    但这并不是想要的结果,其实边距指的是后面那张图片露出来的那部分,最终结果是前后都露出相应的部分

    1.确定想要图片露出的尺寸,假设为50rpx,并设置好当前图片的宽度500rpx

    2.这里使用的ip6的屏幕尺寸,宽为750rpx (rpx单位:可以根据屏幕宽度进行自适应), 用屏幕宽度-图片的宽度,得到两边的边距和

      750-500=250

    3.将边距拆成两部分,得到一边的边距,用边距减去露出的尺寸,得到两张图片之间的边距

       250/2-50=75

    4.如图三,如果设置成一样的大小,边距就空不出来了,所以得为图片设置合适的大小,默认是改变图片盒子的宽度,但swiper-item的宽度不能改成图片的大小,只能将盒子图片居中了,盒子内边距作为空白间隙

    5.图片间距 拆成两部分,分别为图片的外边距

      75/2=37.5

    6.露出的尺寸 加上 外边距 就等于前后边距的值

      37.5+50=87.5

    结果如图

              

    <swiper class='swiper' previous-margin='87.5rpx' next-margin='87.5rpx'>
      <swiper-item class='back center' wx:for='{{img_list}}'>
        <image class='back' src='{{item}}'></image>
      </swiper-item>
    </swiper>
    .swiper{
       height: 600rpx;
    }
    
    .back{
      width: 500rpx;
      height: 600rpx;
      border-radius: 10rpx;
    }
    
    .center {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  • 相关阅读:
    JSP页面中如何注入Spring容器中的bean
    struts2之Action与JSP相互数据传递
    IOS APP开发入门案例
    Android资源文件命名规范学习手册
    自定义控件之实现在线签名,保存,清除等功能实现
    SpringBoot+Mybatis+Maven+MySql小案例
    springBoot注解搜集
    SpringBoot打包war
    SpringBoot之返回json数据
    springboot之freemarker 和thymeleaf模板web开发
  • 原文地址:https://www.cnblogs.com/dongzhi1111/p/9882072.html
Copyright © 2011-2022 走看看