is developed using vue + weex

the code is as follows:
recommend.vue

<template>
  <list show-scrollbar="true" @loadmore="onloadmore" loadmoreoffset="20" class="myscroller">
    <cell v-for = "item in items" :key = "item.feedId"><Item :item = "item"></Item></cell>
  </list>
</template>

<script>
import Item from "./Item.vue"
import { mapState } from "vuex"

export default {
  name: "Recommend",
  components: {
    Item
  },
  computed: mapState(["items"]),
  methods: {
    onloadmore () {
      console.log("more")
    }
  }
}
</script>

<style scoped lang="less">
.myscroller{
  height: 100%;
}
</style>

item.vue

<template>
  <div class="element">
    <image :src="item.user.userProfilePhotoUrl" class="head"></image>
    <div class="header">
      <text class="username">{{item.user.userNickname}}</text>
      <a src="-sharp"><text class="share"></text></a>
      <text class="slogan">{{item.user.userSlogan}}</text>
    </div>
    <div class="content">
      <div class="text">
        <text class="message title">{{item.feedTitle}}</text><text class="message body">{{item.feedContent}}</text>
      </div>
      <image v-for="(url, index) in item.feedPictureList"  :key="index" :src="url" class="pic"></image>
    </div>
    <div class="footer">
      <list>
        <div class="emo_list">
            <cell v-for="(url_emo, index_emo) in item.commentStatList" :key="index_emo" class="li">
                <image :src="url_emo.emojiPictureUrl" @click="url_emo.commentCount += 1" class="emo"></image>
                <text class="emo_text">{{url_emo.commentCount}}</text>
            </cell>
        </div>
      </list>
    </div>
  </div>
</template>

<script>
export default {
  name: "Item",
  props: ["item"]
}
</script>

<style scoped lang="less">
.element{
  padding: 10px;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: white;
  margin-bottom: 5px;
  margin-top: 5px;
}
.pic{
  width: 100%;
  height: 200px;
  border-width: 1px;
}
.head{
  width: 50px;
  height: 50px;
  border-width: 1px;
  border-radius: 50%;
}
.content{
  width: 100%;
  margin-top: 5px;
}
.header{
  flex-direction: row;
  width: 85%;
  flex-wrap: wrap;
  justify-content: space-between;
}
.slogan{
  width: 100%;
  height: 25px;
  line-height: 25px;
  color: gray;
  margin-left: 5px;
  font-size: 15px;
}
.username{
  height: 25px;
  line-height: 25px;
  margin-left: 5px;
}
.message{
  display: inline;
}
.title{
  font-weight: bold;
}
.share{
  color: blue;
}
.text{
  margin-bottom: 3px;
  display: inline-flex;
}
.emo{
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
.emo_list{
  flex-direction: row;
  justify-content: space-around;
}
.li{
  width: 50px;
  flex: auto;
}
.footer{
  width: 100%;
  margin-top: 10px;
}
.emo_text{
  padding-top: 5px;
  text-align: center;
}
</style>

index.vue

<template>
  <div class="index">
    <div class="btns" @click="change">
      <div class="button" id="btn1">
        <text class="text"></text>
      </div>
      <div class="button" id="btn2">
        <text class="text"></text>
      </div>
      <div class="line" ref="line"></div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState } from "vuex"
const animation = weex.requireModule("animation")

export default {
  name: "App",
  data () {
    return {
      Activebtn: 1
    }
  },
  computed: mapState(["items"]),
  methods: {
    change (e) {
      if (e.target.parentNode.id === "btn1" && this.Activebtn === 2) {
        animation.transition(this.$refs.line, {
          styles: {
            transform: "translate(0,0)"
          },
          duration: 1000,
          timingFunction: "ease"
        })
        this.Activebtn = 1
        this.$router.push("/recommed")
      } else if (e.target.parentNode.id === "btn2" && this.Activebtn === 1) {
        animation.transition(this.$refs.line, {
          styles: {
            transform: "translate(100%,0)"
          },
          duration: 1000,
          timingFunction: "ease"
        })
        this.Activebtn = 2
        this.$router.push("/hot")
      }
    },
    getData (url = "") {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open("get", url, true)
        xhr.send()
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
              resolve(JSON.parse(xhr.responseText))
            } else {
              reject(new Error(`:${xhr.status} ${xhr.statusText}`))
            }
          }
        }
      })
    },
    generateUrl ({url = "", ...params}) {
      if (url) {
        const items = []
        for (let [key, value] of Object.entries(params)) {
          items.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
        }
        return `${url}?${items.join("&")}`
      }
      return ""
    },
    async getMessage (obj) {
      const url = this.generateUrl(obj)
      const results = await this.getData(url)
      if (results.code === 200) {
        return results.data.list
      }
      throw new Error("failed")
    }
  },
  created () {
    const obj = {url: "/api/feeds", pageNumber: 1, pageSize: 10}
    this.getMessage(obj).then((data) => {
      this.$store.commit("pushItems", data)
    }).catch(() => {
      console.log("")
    })
  }
}
</script>

<style scoped lang="less">
.btns{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: white;
}
.button{
  width: 50%;
  height: 50px;
}
.text{
  text-align: center;
  font-size: 20px;
  line-height: 50px;
}
.line{
  height: 1px;
  background-color: rgb(37, 92, 243);
  border: 0;
  width: 50%;
}
.index{
  background-color: rgb(240, 234, 234);
}
</style>