We have developed store information display and search functions on the homepage, and then we need to display carousel images. The carousel image needs to be stored in the data source, and when you click on the image, you need to access the official account's article.
1 Create a data source
First create a data source to store the carousel chart, open the console, click on the data model, click the + sign to create a new one
Enter the name of the data source for the carousel chart
Click Edit and add fields
Add the first field image, select the type image
Add the second field, official account article link, type Select URL
Add a third field, whether to enable it, select Boolean as type
2 carousel container
Add a carousel container to the page
Then click the + sign in the code area to create a variable
Select New Data Table Query< a i=3> Select the carousel image in the data table Query whether the condition setting is enabled equal to true Then bind the address to the image
$w.swaperlist.data.records[0].tp
Bind the second and third pictures as above
3 Create article details page
When we click on the picture, we need to open the official account article. We need to create a new page, click the new icon on the page
and put it into the web page nested component
Select the page component and create a new URL parameter
Enter the parameter name URL
Then nest and bind the URL parameter to the web page
to the image The component is bound to the click event, select the open page, select the article details page
The url is bound to our swapperlist's gzhwzlj
$w.swaperlist.data.records[0].gzhwzlj
4 Set permissions
The default data source setting allows only the person to read and write. For public-facing data, we changed it to be available to everyone.
Summarize
In this article, we introduced the use of the carousel component. The configuration of the carousel component is relatively simple. The main thing is to call the web page nested component to display the official account article when clicking on the image to jump, which involves the issue of page parameter transfer.