First, to achieve the effect of round broadcast graph

After obtaining the carousel map by requesting background data, we can use the small program Swiper component to display the carousel map effect:

<! <swiper class="swiper" indicator-dots autoplay circular> <block wx:for="{{integration}}" wx:key="bannerId"> <swiper-item class="swiper-item"> <image class="image" src="{{ item.pic }}" mode="widthFix"></image> </swiper-item> </block> </swiper>Copy the code

Note that in the miniprogram, if the width of the image component is not set, the default width of the image component is 320px * 240px. In order to keep the image of the image component consistent with the swiper width of the rotation image container, the following Settings need to be set:

  1. Set the image width in swiper-item to swiper width:
.swiper-item .image {
  width: 100%;
}
Copy the code

Since the width of swiper container in the applet defaults to the width of the phone screen, you do not need to set the width of swiper container. You only need to set the width of image

  1. Keep the image aspect ratio normal, set mode property for image and set mode property value to “widthFix”

Swiper configuration included in the code:

  • Swiper can contain only swiper-item
  • Indicator -dots(Boolean) : Whether to display indicator dots
  • Autoplay (Boolean) : Indicates whether toplay automatically
  • Circular (Boolean) : Whether to loop indefinitely

For details about how to use swiper and more functions, see wechat official documentation -> Mini Program -> Components -> View Container -> Swiper

Swiper component usage document

Ii. Dealing with details of the rote map (how to dynamically set the height of the rote map)

In the widget’s native Swiper component, the width of the swiper component is the width of the phone screen, and the default height is fixed at 150px. We set the width of the rotation image to the width of the Swiper container to solve the problem of inconsistency between the image width and swiper container. Mode =”widthFix”;

The height of the image is calculated according to mode=”widthFix”, and the screen width of each model is different. Therefore, the height of the image calculated by widthFix is different, which causes the following problems:

For example, the effect shown on iphone6/7/8 models is shown in the figure below:

The iphone5 looks like this:

As you can see, the width of iphone5 screen is narrow, so widthFix calculates the rotation chart height to be smaller, and the rotation chart indicator point will be at the bottom of the rotation chart (because swiper is fixed at 150px and the rotation chart height is less than 150px).

What we want to achieve is that the swiper height should be consistent with the height calculated from the rotation map.

The image height is calculated dynamically using widthFix, which varies from phone to phone. How do we dynamically obtain the image height to swiper?

Therefore, we need to perform the following operations to solve this problem:

  • Dynamically get image height
  • Set swiper height to image height

2-1. Dynamically obtain the image height

The image of the broadcast image comes from the requested interface and belongs to the network image. However, we only set the SRC of image as the requested image address, so the height of the image cannot be obtained during this process. So we can only get the height of the picture by making sure that the network picture has been downloaded and loaded.

So how do we know when the image is loaded?

A review of the official documentation shows that the applet provides the image component with a BindLoad event that fires when the image is loaded. However, the height we get from bindLoad is the height of the original image, not the height displayed on the wheel (the width of the image on the wheel is calculated by setting the width of image to 100%, mode=”widthFix”). So what we really need to get is the width and height of the image component.

Obtain the width and height of the image component

So how do you get the width and height of the component?

The applet provides us with an API: wx.createsElectorQuery ()

  • First bind the bindLoad event to the image component:

  • Dynamically get the height of the image component in the event via the API:
  handleSwiperLoaded: function() {
    const query = wx.createSelectorQuery()
    query.select('.swiper-image').boundingClientRect()
    query.exec((res) => {
      const rect = res[0]
      this.setData({ swiperHeight: rect.height })
    })
  },
Copy the code

2-2. Set swiper height to the image height

Since styles in WXSS cannot be set dynamically in applets, we can write styles as inline styles, which can be achieved by changing inline styles.

2-3. Use throttling functions for optimization

Since there are multiple images in the multicast graph, the bindLoad binding function will be triggered once after each image is loaded. In fact, it only needs to obtain the image component height once. Therefore, optimization can be considered by using the throttle function provided by LoDash.