Use of apicloud AVM framework list component list view and flex layout tutorial

avm.js yes APICloud Launched a multi terminal development framework . Use avm.js A technology stack can be developed at the same time Android & iOS Native App、 Applets and iOS light App, And the multi end rendering effect is unified ; all-new App engine 3.0 Do not rely on webView, Provide 100% native rendering , guarantee App Performance and experience vs. native App Agreement .

list-view Define a vertical scrolling view of reusable content , Can optimize memory usage and rendering performance , Support pull-down refresh and pull-up load . You can use scroll-view Basic properties of .

list-view There is room for cell、list-header、list-footer、refresh And so on , Use cell Component is displayed as each item .

Let's take a look at one list-view An example of ：

<template>
  <list-view id="listView" class="main" enable-back-to-top onscrolltolower={this.onscrolltolower}>
    <cell class="cell c-lc-rl_ac c-sy-border_bottom c-lc-ptb" onclick={this.itemClick}>
      <img class="img" src={item.url} alt="">
      <text class="title c-filling-w c-pl">{item.title}</text>
    </cell>
    <list-footer class="footer">
      <text> Loading ...</text>
    </list-footer>
  </list-view>
</template>
<style src='../../css/c-layout-mini.css' scoped>
</style>
<style>
.main {
  width: 100%;
  height: 100%;
}
 
.cell {
  width: 100%;
  height: 70px;
}
 
.img {
  height: 50px;
  width: 50px;
  margin-left: 10px;
}
.title {
  height: 50px;
  font-size: 20px;
  line-height: 50px;
}
 
.footer {
  justify-content: center;
  align-items: center;
}
</style>
 
<script>
export default {
  name: 'test',
  methods: {
    apiready() {
      this.initData(false);
    },
    initData(loadMore) {
      var that = this;
      var skip = that.dataList ? that.dataList.length : 0;
      var dataList = [];
      for (var i = 0; i < 20; i++) {
        dataList[i] = {
          title: ' project ' + (i + skip),
          url: '../../image/nav_tab_2.png'
        }
      }
      var listView = document.getElementById('listView');
      if (loadMore) {
        that.dataList = that.dataList.concat(dataList);
        listView.insert({
          data: dataList
        });
      } else {
        that.dataList = dataList;
        listView.load({
          data: dataList
        });
      }
    },
    onscrolltolower() {
      this.initData(true);
    },
    itemClick(e) {
      api.alert({
        msg: ' Current item index ：' + e.currentTarget.index
      });
    }
  }
}
</script>

The effect is as follows ：

list-view Only support APP, Need to use custom loader or APPloader debugging . Debug tutorial to view documentation APICloud Studio3 WiFi Real machine synchronization and WiFi Real machine preview instructions

list-view Built in memory recycling function , You can scroll to load more .

to list-view Add a drop-down refresh component refresh

according to refresh Component documentation , hold refresh Tag added to list-view In the label , as follows ：

<template>
    <list-view id="listView" class="main" enable-back-to-top onscrolltolower={this.onscrolltolower}>
        <refresh class="refresh" state={refreshState} onstatechange={this.onstatechange}>
            <image class={refreshIconClass} src="../../image/refresh.png"></image>
            <image class={refreshLoadingClass} src="../../image/loading_more.gif"></image>
            <text class="refreshStateDesc">{refreshStateDesc}</text>
        </refresh>
    
    <cell class="cell c-lc-rl_ac c-sy-border_bottom c-lc-ptb" onclick={this.itemClick}>
            <img class="img" src={item.url} alt="">
            <text class="title c-filling-w c-pl">{item.title}</text>
        </cell>
        <list-footer class="footer">
            <text> Loading ...</text>
        </list-footer>
    </list-view>
</template>

hold refresh Component's css ,js The code is also copied to the corresponding style and script In the label , And in the project directory image Add two drop-down refresh pictures used under the tag . The complete code is as follows ：

<template>
    <list-view id="listView" class="main" enable-back-to-top onscrolltolower={this.onscrolltolower}>
        <refresh class="refresh" state={refreshState} onstatechange={this.onstatechange}>
            <image class={refreshIconClass} src="../../image/refresh.png"></image>
            <image class={refreshLoadingClass} src="../../image/loading_more.gif"></image>
            <text class="refreshStateDesc">{refreshStateDesc}</text>
        </refresh>
    
    <cell class="cell c-lc-rl_ac c-sy-border_bottom c-lc-ptb" onclick={this.itemClick}>
            <img class="img" src={item.url} alt="">
            <text class="title c-filling-w c-pl">{item.title}</text>
        </cell>
        <list-footer class="footer">
            <text> Loading ...</text>
        </list-footer>
    </list-view>
</template>
<style  src='../../css/c-layout-mini.css' scoped>
</style>
<style>
.main {
  width: 100%;
  height: 100%;
}

.cell{
  width: 100%;
  height: 70px;
}

.img{
  height: 50px;
  width: 50px;
  margin-left: 10px;  
}
.title {
  height: 50px;
  font-size: 20px;
  line-height: 50px;
}

  .footer {
        justify-content: center;
        align-items: center;
    }

  .refresh {
        align-items: center;
        justify-content: center;
        background-color: #eee;
    }
    .refreshStateDesc {
        color: #e3007f;
        font-size: 13px;
    }
    .refreshIcon {
        position: absolute;
        width: 25px;
        height: 22px;
        bottom: 21px;
        left: 70px;
        transition-property: transform;
        transition-duration: 100ms;
    }
    .refreshIcon-normal {
        transform: rotate(0);
        visibility: visible;
    }
    .refreshIcon-dragging {
        transform: rotate(180deg);
        visibility: visible;
    }
    .refreshIcon-refreshing {
        visibility: hidden;
    }
    .refreshLoading {
        position: absolute;
        width: 22px;
        height: 22px;
        bottom: 21px;
        left: 70px;
        visibility: hidden;
    }
    .refreshLoading-refreshing {
        visibility: visible;
    }

</style>

<script>
    export default {
        name: 'test',
     data(){
            return {
                refreshState: 'normal'
            }
        },
    computed: {
            refreshIconClass(){
                if (this.data.refreshState == 'normal') {
                    return 'refreshIcon refreshIcon-normal';
                } else if (this.data.refreshState == 'dragging') {
                    return 'refreshIcon refreshIcon-dragging';
                } else if (this.data.refreshState == 'refreshing') {
                    return 'refreshIcon refreshIcon-refreshing';
                }
            },
            refreshLoadingClass() {
                if (this.data.refreshState == 'refreshing') {
                    return 'refreshLoading refreshLoading-refreshing';
                } else {
                    return 'refreshLoading';
                }
            },
            refreshStateDesc() {
                if (this.data.refreshState == 'normal') {
                    return ' Drop down to refresh ';
                } else if (this.data.refreshState == 'dragging') {
                    return ' Release to refresh ';
                } else if (this.data.refreshState == 'refreshing') {
                    return ' Refreshing ...';
                }
            }
        },
        methods:{
            apiready() {
                this.initData(false);
            },
            initData(loadMore) {
                var that = this;
                var skip = that.dataList?that.dataList.length:0;
                var dataList = [];
                for (var i=0;i<20;i++) {
                    dataList[i] = {
                        title: ' project ' + (i + skip),
                        url: '../../image/nav_tab_2.png'
                    }
                }
                var listView = document.getElementById('listView');
                if (loadMore) {
                    that.dataList = that.dataList.concat(dataList);
                    listView.insert({
                        data: dataList
                    });
                } else {
                    that.dataList = dataList;
                    listView.load({
                        data: dataList
                    });
                }
            },
            onscrolltolower() {
                this.initData(true);
            },
            itemClick(e) {
                api.alert({
                    msg: ' Current item index ：' + e.currentTarget.index
                });
            },
      onstatechange(e) {
                var state = e.detail.state;
                if (state == 'normal') {
                    this.data.refreshState = 'normal';
                } else if (state == 'dragging') {
                    this.data.refreshState = 'dragging';
                } else if (state == 'refreshing') {
                    this.data.refreshState = 'refreshing';
                    var that = this;
                    setTimeout(function(){
                        that.data.refreshState = 'normal';
                    }, 2000);
                }
            }
        }
    }
</script>

wi-fi Sync to the phone loader, Drop down page , The operation effect is as follows ：

Flex Layout introduction ：Flex Layout means elastic box layout , It is more suitable for mobile terminal scenarios , Adapt to different screen sizes .

<div>
   <div>item</div>
   <div>item</div>
   <div>item</div>
</div>

You can usually define a parent element as an elastic box or container , Items whose child elements are elastic boxes .flex The main function of the layout is to arrange and distribute the items as expected on the main axis or cross axis , Define the occupancy ratio of each project , And it can be expanded and expanded according to the size of the container .

The above picture is quoted from the following blog , Recommended reading ：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Recommend a flex git:https://gitee.com/jiang_xincheng/c-layout