微信小程序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;
}

原文地址:https://www.cnblogs.com/dongzhi1111/p/9882072.html

时间: 2024-11-10 13:00:49

微信小程序swiper 前后边距的使用的相关文章

如何自定义微信小程序swiper轮播图面板指示点的样式

https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组件的面板指示点的样式呢?最近在使用swiper的时候也在想这个,最后发现在调试的时候,可以看到他的选择器.如图: <swiper class="swiper-box" indicator-

绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象)

微信小程序开发文档-组件-swiper后面追加的新闻如上图所示: 如果在bindchange事件给swiper的current属性对应的值{{current}}赋值,就会造成抖动现象. 1 bindchangeSwiper(event) { 2 console.log(event.detail); 3 this.setData({ 4 current: event.detail.current 5 }) 6 }, 可是有的时候我们确实需要动态获取当前的swiper-item索引,用来额外做一些其

自定义微信小程序swiper轮播图面板指示点的样式

微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组件的面板指示点的样式呢?最近在使用swiper的时候也在想这个,最后发现在调试的时候,可以看到他的选择器.如图: 1 2 3 4 5 6 7 8 9 <swiper class="swiper-box" indicator-dots="{{ indicatordots }}

第五篇、微信小程序-swiper组件

常用属性: 效果图: swiper.wxml添加代码: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}} " bindchange="bindchangeTag"> <block wx:for="{{im

微信小程序--swiper组件

<view class='swiper-container'> <swiper indicator-dots="true" autoplay="true" interval="5000" vertical="{{false}}" class='swiper' class='aaa'> <block wx:for="{{imgUrls}}"> <swiper-item

微信小程序swiper禁止用户手动滑动

最近做一个项目,由于用到了竖向swiper,导致占用屏幕过大,用户滑动总是滑动到swiper组件,页面无法向下拉动,于是找各种办法禁止用户手动滑动swiper组件. 经过网上一番查找,网友们也是闹洞大开,各种方法都想出来了,有用透明蒙层覆盖的,这不失为一种很好的解决办法,但是如果swiper上有元素需要点击就没有办法了. 继续查找,于是找到了用  catchtouchmove  事件来截获用户手动滑动事件,这样既解决了禁用用户手动滑动,有解决了有点击按钮不影响使用 贴代码: WXML: <swi

微信小程序 swiper 组件坑

swiper 组件高度被限制为150px了,所以内容无法撑开. 解决办法 给这组件重新设置个高度,然后在把里面的图片设置为自动适应容器大小.图片模式设置为 宽度不变 自动适应高度 <swiper class="test" .....> <swiper-item> <image mode='widthFix' ...... /> </swiper-item> </swiper> <style>.text{ heigh

微信小程序swiper使用网络图片不显示问题

@ wxml代码: <view class="container"> <swiper indicator-dots="true}" autoplay="true" interval="3000" duration="1"> <block wx:for="{{imgUrls}}" wx:key="*this"> <swiper-

微信小程序_(视图)简单的swiper容器

swiper容器效果 官方文档:传送门 swiper容器可实现简单的轮播图效果 结构程序 Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函