小程序模板网

自定义swiper面板指示点的样式,image图片自适应宽度比例显示

发布时间:2018-02-06 16:09 所属栏目:小程序开发教程

 

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

 

  1. <swiper class="swiper-box" indicator-dots="{{ indicatordots }}" autoplay="{{ autoplay }}">
  2. <block wx:for="{{ swiperItem }}">
  3. <swiper-item>
  4. <navigator url="{{ item.linkUrl }}">
  5. <image class="slide-image" src="{{ item.imgUrl }}"></image>
  6. </navigator>
  7. </swiper-item>
  8. </block>
  9. </swiper>
 

  1. .swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{
  2. margin-bottom: 2rpx;
  3. }
  4. .swiper-box .wx-swiper-dot{
  5. width:40rpx;
  6. display: inline-flex;
  7. height: 10rpx;
  8. margin-left: 20rpx;
  9. justify-content:space-between;
  10. }
  11. .swiper-box .wx-swiper-dot::before{
  12. content: '';
  13. flex-grow: 1;
  14. background: rgba(255,255,255,0.8);
  15. border-radius: 8rpx
  16. }
  17. .swiper-box .wx-swiper-dot-active::before{
  18. background:rgba(244,0,0,0.8);
  19. }

虽然可以通过上面的代码修改swiper面板指示点的样式,但是还是有局限性的,不过总算可以修改了,在此简单记录一下。。 

 

 

二:微信小程序image图片自适应宽度比例显示的方法

我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性:  1、src 图片资源地址  2、mode 图片裁剪、缩放的模式  3、binderror 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: ‘something wrong’}  4、bindload 当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:’图片高度px’, width:’图片宽度px’}  但是image有默认的固定的宽度和高度,这样我们在做图片自适应的时候,就不好做了,特别是我们在做一些商品详情页的时候,需要image自适应屏幕,按原图比例显示。那么如何让image自适应比例显示呢?可以有两种方法:

一、使用mode:widthFix  widthFix:宽度不变,高度自动变化,保持原图宽高比不变。  首先我们先设置image的mode为widthFix,然后给图片加一个固定rpx的宽度,比如:730rpx。  这样图片也可以自适应了。。因为小程序的rpx本身就是一个自适应显示的单位  二、使用bindload绑定函数动态自适应。  我们可以给image绑定一个函数,这个函数,如上面的bindload说明一样,我们可以获取到原图的宽度和高度。  然后计算他们的宽高比率。。然后设置一个宽度大小(rpx),最后通过style动态设置image的宽高。代码如下:

html代码:

 

  1. <image src="{{ item }}" bindload="imageLoad" data-index="{{ index }}"
  2. style="width:{{ images[index].width }}rpx; height:{{ images[index].height }}rpx;"></image>

js代码:

 

  1. Page({
  2. data: {
  3. images:{}
  4. },
  5. imageLoad: function(e) {
  6. var $width=e.detail.width, //获取图片真实宽度
  7. $height=e.detail.height,
  8. ratio=$width/$height; //图片的真实宽高比例
  9. var viewWidth=718, //设置图片显示宽度,左右留有16rpx边距
  10. viewHeight=718/ratio; //计算的高度值
  11. var image=this.data.images;
  12. //将图片的datadata-index作为image对象的key,然后存储图片的宽高值
  13. image[e.target.dataset.index]={
  14. width:viewWidth,
  15. height:viewHeight
  16. }
  17. this.setData({
  18. images:image
  19. })
  20. }
  21. })

最后,我们就可以可以通过images[index].width 和 images[index].height给每一个图片设置宽高了。  以上是自己在玩小程序时,关于image自适应方法的简单记录。。

效果如下图所示:


本文地址:https://www.eyoucms.com/wxmini/doc/course/21651.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询