salmanyaqoob

.stack {
    width: 454px;
    height: 454px;
    justify-content: center;
}
.background {
    width:454px;
    height:454px;
}
.container {

salmanyaqoob

<stack class="stack">
    <image src='/common/background.png' class="background"></image>
    <div class="container" onswipe="touchMove">
        <list class="showList">
            <list-item class="showListItem" onclick="openPage('arrays/arrays')">
                <text>
                    Array
                </text>
            </list-item>
            <list-item class="showListItem" onclick="openPage('animator/animator')">

salmanyaqoob

import router from '@system.router'
  
 export default {
     backToHome(){
         router.replace({
             uri: 'pages/index/index'
         });
     },
 }

salmanyaqoob

import router from '@system.router'
import app from '@system.app'


export default {
    data: {
    },
    clickAction(){
        router.replace({
            uri: 'pages/detail/detail'

salmanyaqoob

@import '../../common/style.css';


.showList {
    background-color: transparent;
    flex-direction: column;
    width: 454px;
    height: 400px;
}
.showListItem {

salmanyaqoob

<stack class="stack">
    <image src='/common/background.png' class="background"></image>
    <div class="container" onswipe="touchMove">
        <text>
            Arrays
        </text>
        <!-- div loop rendering -->
        <!--By default, $item indicates the element in the array, and $idx indicates the index of the element in the array.-->
        <div for="{{arrayData}}" tid="id" class="containerArray">
            <text>{{$idx}}.{{$item.name}}

salmanyaqoob

import app from '@system.app'
import utils from '../../common/utils.js';


export default {
    data: {
        arrayData: [
            {id: 1, name: 'jack', age: 18},
            {id: 2, name: 'tony', age: 18},
        ],

salmanyaqoob

@import '../../common/style.css';


.containerArray {
    flex-direction: column;
    width: 300px;
    height: 50px;
    background-color: transparent;
}

salmanyaqoob

<stack class="stack">
    <image src='/common/background.png' class="background"></image>
    <div class="container">
        <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s"
                onclick="handleClick"></image-animator>
        <input class="backBtn" type="button" value="Back" onclick="backAction"></input>
    </div>
</stack>

salmanyaqoob

import utils from '../../common/utils.js';

export default {
    data: {
        images: [
            { src: '/common/pic1.png' },
            { src: '/common/pic2.png' },
            { src: '/common/pic3.png' },
            { src: '/common/pic4.png' },
            { src: '/common/pic5.png' },