Detailed explanation of swiper operation picture steps

This time I will bring you a detailed explanation of the steps for swiper operation pictures. What are the precautions for swiper operation pictures? The following is a practical case, let's take a look.

1. Structure

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{bg}}" style=&#39;height:{{Height}}&#39;>
   <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" mode="widthFix" bindload=&#39;imgHeight&#39;/>  //bindload是绑定图片加载的事件,记得给image加上mode=“widthFix”这个属性哦，还有就是设置这个image 100%宽度哟
    </swiper-item>
   </block>
</swiper>

The various attributes of swiper are available in the official documents and will not be explained here. The most important thing is: style='height:{{Height}}' //Dynamicly set the height of the swiper

2. In the page:

data: {
  imgUrls: [          
    '../img/goodsDetail/goods.png',
    '../img/goodsDetail/goods.png',
    '../img/goodsDetail/goods.png'
  ],
  indicatorDots: true,
  autoplay: true,
  interval: 5000,
  duration: 1300,
  bg: '#C79C77',
  Height:""     //这是swiper要动态设置的高度属性
 },
imgHeight:function(e){
  var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
  var imgh=e.detail.height;//图片高度
  var imgw=e.detail.width;//图片宽度
  var swiperH=winWid*imgh/imgw + "px"//等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度  ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
  this.setData({
    Height:swiperH//设置高度
  })
},

Summary: Get the current screen width: wx .getSystemInfoSync().windowWidth

Dynamic setting of attributes in the mini program can only be set through setData({ }), which is a bit similar to directly operating css styles in js

Note: if image There is a container in the outer layer, and then after the width of the image is set to 100%, it is a little distance from the bottom of the container where it is placed. That is because the image has the display:inline-block attribute set by default. This attribute will Create a gap. If you want to fill the container, just set it to display:block.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to dynamically set routing parameters in Vue

Detailed explanation of the steps of vue.js front-end and back-end data interaction

The above is the detailed content of Detailed explanation of swiper operation picture steps. For more information, please follow other related articles on the PHP Chinese website!