微信小程序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;
}
微信小程序swiper 前后边距的使用的更多相关文章
- 微信小程序swiper实现 句子控app首页滑动卡片
微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...
- 微信小程序swiper制作内容高度不定的tab选项卡
微信小程序利用swiper制作内容高度不定的tab选项卡,不使用absolute定位,不定高度,由内容自由撑开主要思路是获取内容区的高度来给swiper动态设置值 .wxml <view cla ...
- 绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象)
微信小程序开发文档-组件-swiper后面追加的新闻如上图所示: 如果在bindchange事件给swiper的current属性对应的值{{current}}赋值,就会造成抖动现象. bindcha ...
- 如何自定义微信小程序swiper轮播图面板指示点的样式
https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...
- 微信小程序swiper bindChange重复执行
swiper是微信小程序的一个滑动组件,非常重要.如果只是做简单的轮播图而不进行复杂的逻辑,直接可以使用,甚至不需要知道组件的方法.今天在做一个如下的页面时,快速滑动swiper出现了问题: 控制台打 ...
- 自定义微信小程序swiper轮播图面板指示点的样式
微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...
- 微信小程序swiper高度自适应,swiper的子元素高度不固定
小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...
- 基于angular实现模拟微信小程序swiper组件
这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组 ...
- 微信小程序aes前后端加密解密交互
aes前后端加密解密交互 小程序端 1. 首先引入aes.js /** * [description] CryptoJS v3.1.2 * [description] zhuangzhudada so ...
随机推荐
- DAY 24继承与组合
一.继承 继承就是子类与父类形成的一种关系,可以让子类能直接从父类中获取属性与方法 优点:减少了类与类之间的代码冗余 语法: class 父类: # 父类是多个有共同点的普通类抽离共有属性与方法形成的 ...
- 调节kafka消费信息的大小
Kafka设计的初衷是迅速处理短小的消息,一般10K大小的消息吞吐性能最好(可参见LinkedIn的kafka性能测试).但有时候,我们需要处理更大的消息,比如XML文档或JSON内容,一个消息差不多 ...
- ftp定时任务-日志备份
1. 安装 #yum -y install vsftpd 2. 修改配置文件 #vi /etc/vsftpd/vsftpd.conf FTP服务器的默认目录是/var/ftp,而且当用户以匿名方式登录 ...
- java 分布式id生成算法
import java.lang.management.ManagementFactory; import java.net.InetAddress; import java.net.NetworkI ...
- Element-ui表格选中回显
先瞄一下,是不是你要的效果 然后,废话不多说,直接上代码啦 <template> <div class> <div class="projectData&quo ...
- 牛逼的MySQL,起死回生啊
1.目标库新建数据库root@mysqldb 14:10: [(none)]> create database db_name; root@mysqldb 14:11: [(none)]&g ...
- 关于footer 小于一屏还要在底部显示的思考
首先想到了页面是动态的 就是js 计算 但是有一个简单的方法就是 运用定位 1 footer 的祖先元素没有定位属性 absoulite (这样他就会相对于文档定位) left:0 bottom : ...
- win10php环境变量配置(xampp环境)
我的电脑--属性(右键)--高级系统设置--环境变量--系统变量--Path--编辑 新建两条变量: 一个是xampp文件下的php文件,例如 C:\xampp\php 一个是xampp文件下的php ...
- Treap标准模板
这是Treap的模板程序,支持Left/Right Rotate,Find the maxnum/minnum,Find the predecessor/successor of a node,Add ...
- For in + 定时器
Fon in for/in 语句用于循环对象属性. 循环中的代码每执行一次,就会对对数组的元素对象的属性进行一次操作. <p id = "demo"><p> ...