Custom page introduction carousel

1. Usage scenarios

The carousel graph component of the existing component library can only be limited to fixed styles. By introducing swiper.js on custom pages, this paper introduces how to introduce external JS on custom pages to realize complex carousel graph scenarios.

2. Video tutorial

Updating, please look forward ~

3. Procedure

3.1 Step 1: Create a carousel bottom table

Operation method:

1. Create a form page and drag an image in the component library to upload it to the middle canvas of the page, named Carousel bottom table 」.
2. Click save.

(The operation method is shown in Figure 3.1)

Figure 3.1 form page settings

3.2 Step 2: Create a custom page

3.2.1 configure JSX component related properties and styles

Create a custom page and drag a JSX component from the component library to the middle canvas of the page, set the class name and style, and name it "custom page introduction Carousel 」.

Operation method:

1. On the page, click Select jsx component. In the property bar on the right, click edit JSX code.
2. Copy the following code.

(The operation method is shown in Figure 3.2-1)

Figure 3.2-1 JSX component settings

The code introduced below can be copied directly into the JSX panel.

function render(me, state, data, ctx) {
  const { dp2 } = this.state;
  const result = dp2.map(item => {
    return (
      <div class="swiper-slide"><img src={item.imgurl} /></div>
    )
  })
  return (
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        {result}
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>
  );

}

3. Click the style bar on the right and select source code edit to copy the following code.

(The operation method is shown in Figure 3.2-2)

Figure 3.2-2 HTML component settings

The code introduced below can be copied directly into the panel.

:root .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 300px;
   
      }

3.2.2 configure HTML component attributes

Drag an HTML component to the middle canvas of the page in the custom page and the component library on the left.

Operation method:

1. On the page, click Select HTML component and click edit HTML code in the property bar on the right.
2. Copy the following code.

(The operation method is shown in Figure 3.2-3)

Figure 3.2-3 HTML component settings

The code introduced below can be copied directly into the HTML panel.

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />

3.3 Step 3: bind didmount to the custom page and call the method

Procedure:

1. Click Select page.
2. In the property bar on the right, click the bind action button when the page is loaded.

3. In the dialog box that appears, selectdidMountAction.
4. Copy the following code to the JS panel didMount function.

(The operation method is shown in Figure 3.3)

Figure 3.3 custom page binding didmount

The code introduced below can be copied directly into the JS panel.

export function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.crossOrigin = 'anonymous';
    script.src = src;
    script.onload = (evt) => {
      const { type, currentTarget, srcElement } = evt;
      const element = currentTarget || srcElement;
      if (type === 'load' || ['complete', 'loaded'].indexOf(element.readyState) > -1) {
        resolve();
      }
    };
    script.onerror = reject;
    document.body.appendChild(script);
  });
}
function swiper() {
  loadScript('https://unpkg.com/swiper/swiper-bundle.js').then(() => {
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 30,
      loop: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  })
}
export function didMount() {
  console.log(`「页面 JS」：当前页面地址 ${location.href}`);
  // console.log(`「页面 JS」：当前页面 id 参数为 ${this.state.urlParams.id}`);
  // 更多 this 相关 API 请参考：https://www.yuque.com/yida/support/ocmxyv#OCEXd
  // document.title = window.loginUser.userName + ' | 宜搭';
  swiper();
}

3.4 Step 4: Set the variable data source

3.4.1 add variable data sources

Operation method:

1. Click the data source button on the left side of the page to open the data source configuration dialog box.
2. Click Add and selectVariableOption, add the namedp2The variable data source.

3. In the data column, fill in the corresponding data as shown in the figure.
4. Click save to close the data source configuration dialog box.

(The operation method is shown in Figure 3.4-1)

Figure 3.4-1 set variable data source

3.4.2 add a remote data source

Operation method:

1. Click the data source button on the left side of the page to open the data source configuration dialog box.
2. Click Add and selectQuickly create a remote APIOption, add the nameswiperThe remote data source.

3. In the data column, fill in the corresponding data as shown in the figure.

Note: parameter formUuid is the formUuid of the carousel bottom table (you can customize the form formUuid as needed)

4. In data processing, select didFetch request completion callback function, and copy the following code to the JS panel didFetch function.
5. Click save to close the data source configuration dialog box.

(The operation method is shown in Figure 3.4-2)

Figure 3.4-2 configure a remote data source

The code introduced below can be copied directly into the JS panel.

function didFetch(content) {
  // content.b = 1; 修改返回数据结构中的 b 字段为1
  let value = [];
  content.data.map(item => {
    let img = JSON.parse(item.formData.imageField_kvbsaf9j)
    let arr = {
      imgurl: img[0].url
    }
    value.push(arr);
  })
  console.log(value);
  this.setState({
    dp2: value
  })
  return content; // 重要，需返回 content
}

4. Effect demonstration

4-1 effect demonstration

5. Try it online

For online experience, please go to the Developer Center.👉Custom page introduction carousel

-------------------- Get the latest information YIDA, welcome to follow US--------------------