If you have a lot of data, you may want to store the data in an array, and then use JavaScript's array method to implement the "change batch" function.
Here is a simple example that uses an array to store some data and then when the button is clicked, displays the next data in the array.
<!DOCTYPE html>
<html>
<head>
<title>Array Example</title>
<script>
var data = ["Data 1", "Data 2", "Data 3", "Data 4", "Data 5"];
var currentIndex = 0;
function displayData() {
var text = document.getElementById("displayText");
text.innerHTML = data[currentIndex];
}
function nextData() {
currentIndex = (currentIndex + 1) % data.length;
displayData();
}
</script>
</head>
<body>
<h1 id="displayText">Data 1</h1>
<button onclick="nextData()">Next</button>
</body>
</html>
In this example, we first define an array data, which contains five strings. We then define a variable currentIndex that keeps track of the index of the currently displayed data.
We also define two functions: displayData() and nextData(). The displayData() function is used to display the current data, and the nextData() function is used to display the next data. The nextData() function first increments currentIndex by 1 and then uses the modulo operator to ensure that the index does not exceed the range of the array. Then, it calls the displayData() function to display the new data.
In HTML, we create a button and set its onclick attribute to "nextData()", which means that when the button is clicked, the nextData() function will be called to display the next data in the array.
The above logical idea is the same in any language.
If I develop using arkTS and plan to create a card function, please note that cards are only available in api9 version
Click Change Batch to switch the display of the next image.
@Entry
@Component
struct WidgetCard {
@State onActive:number=0
@State arrImage: Object[] = [
{
name:'你好',
image:$r("app.media.hello"),
content:'一手食指指向对方。一手握拳，向上伸出拇指。',
video:$rawfile('hello.mp4')
},
{
name:'谢谢',
image:$r('app.media.thank'),
content:'一手伸出拇指，弯曲两下，表示向人感谢。',
video:$rawfile('thank.mp4')
},
{
name:'爱',
image:$r('app.media.love'),
content:'一手轻轻抚摩另一手拇指指背，表示一种“怜爱”的感情',
video:$rawfile('love.mp4')
},
{
name:'喜欢',
image:$r('app.media.live'),
video:$rawfile('like.mp4'),
content:'一手拇、食指微曲，指尖抵于颌下，头微微点动一下。 ',
},
{
name:'不喜欢',
image:$r('app.media.dislike'),
video:$rawfile('dislike.mp4'),
content:'一手伸直，左右摆动几下。 一手拇、食指微曲，指尖抵于颌下，头微微点动一下。 ',
},
{
name:'饭',
image:$r('app.media.eat'),
video:$rawfile('eat.mp4'),
content:'（一）一手拇、食指相对，中间留有米粒大小距离。（二）一手伸食、中指象征筷子，作吃饭动作。',
},
{
name:'快',
image:$r('app.media.quick'),
video:$rawfile('quick.mp4'),
content:'一手拇、食指相捏，很快地从一侧向另一侧作快速挥动，象征物体运动速度很快。',
},
{
name:'慢',
image:$r('app.media.slow'),
video:$rawfile('show.mp4'),
content:'一手掌心向下，慢慢地上下微动几下，象征物体运动速度缓慢。',
},
{
name:'没关系',
image:$r('app.media.matter'),
video:$rawfile('matter.mp4'),
content:'一手拇、食、中指捻动，连续几次。 两手拇、食指搭成圆圈，互相套环。 ',
},
{
name:'厉害',
image:$r('app.media.powerful'),
video:$rawfile('powerful.mp4'),
content:'一手打手指字母“L”的指式，并绕脸部转一圈。同时面部作出严厉的表情。 ',
},
];
/*
* The max lines.
*/
readonly MAX_LINES: number = 1;
/*
* The action type.
*/
readonly ACTION_TYPE: string = 'router';
/*
* The message.
*/
readonly MESSAGE: string = 'add detail';
/*
* The ability name.
*/
readonly ABILITY_NAME: string = 'EntryAbility';
/*
* The with percentage setting.
*/
readonly FULL_WIDTH_PERCENT: string = '100%';
/*
* The height percentage setting.
*/
readonly FULL_HEIGHT_PERCENT: string = '100%';
@State imageCard: Resource = $r("app.media.love")
@State immersive: string='爱'
@State detail_immersive: string='一手轻轻抚摩另一手拇指指背，表示一种“怜爱”的感情。'
build() {
Stack() {
Image(this.arrImage[this.onActive]['image'])
.width(this.FULL_WIDTH_PERCENT)
.height(this.FULL_HEIGHT_PERCENT)
.objectFit(ImageFit.Cover)
Column() {
Text(this.arrImage[this.onActive]['name'])
.fontSize($r('app.float.title_immersive_font_size'))
.textOverflow({
overflow: TextOverflow.Ellipsis })
.fontColor($r('app.color.text_font_color'))
.maxLines(this.MAX_LINES)
Text(this.arrImage[this.onActive]['content'])
.fontSize($r('app.float.detail_immersive_font_size'))
.opacity($r('app.float.detail_immersive_opacity'))
.margin({
top: $r('app.float.detail_immersive_margin_top') })
.textOverflow({
overflow: TextOverflow.Ellipsis })
.fontColor($r('app.color.text_font_color'))
.maxLines(this.MAX_LINES)
}
.width(this.FULL_WIDTH_PERCENT)
.height(this.FULL_HEIGHT_PERCENT)
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.End)
.padding($r('app.float.column_padding'))
Flex({
direction: FlexDirection.Row, justifyContent: FlexAlign.Center }){
Image($r("app.media.ic_new")).width(11).height(11)
.margin({
left:10,
top:3,
right:5
})
Text("换一批").fontSize('8fp').width(40)
.fontColor('#fff')
.margin({
top:3
})
.onClick(()=>{
this.onActive=(this.onActive+1)%this.arrImage.length;
})
}.backgroundColor('#ff986ec8')
.width(50)
.height(15)
.borderRadius(10)
.margin({
top:-120,
left:-100
})
}
.width(this.FULL_WIDTH_PERCENT)
.height(this.FULL_HEIGHT_PERCENT)
.onClick(() => {
postCardAction(this, {
"action": this.ACTION_TYPE,
"abilityName": this.ABILITY_NAME,
"params": {
"message": this.MESSAGE
}
});
})
}
}