weex 页面实践1

展示效果

image.png

代码

<template>
  <div>
    <scroller class='scroller'>
      <div class='topView'>
        <text class='topText'>可消费金额(元)</text>
        <text class='topText2'>0.00</text>
        <text class='topText3'>大理无息借款，查找附近直营店、加盟店去授信</text>

      </div>
      <slider class="slider" interval="3000" auto-play="true">
      <div class="frame" v-for="img in imageList">
        <image class="image" resize="cover" :src=img.src></image>
      </div>
    </slider>
    <div v-for="(array, i) in arrays" class="row">
      <div v-for="(dict, k) in array" class="item">
        <div>
          <image style="width:80px;height:80px;" 
          :src=dict.src>
          </image>
          <text>{{dict.title}}</text>
        </div>
      </div>
    </div>
    </scroller>
  </div>
</template>
<style scoped>
.scroller {
  height:1900px;
}
.topView {
  background-color:#449ef6;
  height:400px;
  justify-content: center;
    align-items:center;
}
.topText {
  position: absolute;
    top: 70px;
  color:white;
}
.topText2 {
  position: absolute;
    top: 130px;
  color:white;
  font-size:64;
}
.topText3 {
  padding-top:20px;
  text-align:center;
  flex:1;
  height:80px;
  background-color:#3e7af8;
  position: absolute;
    bottom: 0px;
    left:0px;
    right:0px;
  color:white;
  /*font-size:64;*/
}
  .item{
    flex:1;
    justify-content: center;
    align-items:center;
    border-width:1;
    border-color:#e6e6e6;
  }
  .row{
    flex-direction: row;
    height:200px;
  }
  .image {
    /*flex:1;*/
    width: 700px;
    height: 300px;
  }
  .slider {
    /*flex:1;*/
    /*margin-top: 25px;*/
    /*margin-left: 25px;*/
    /*width: 700px;*/
    height: 300px;
    /*border-width: 1px;*/
    /*border-style: solid;*/
    /*border-color: #41B883;*/
  }
  .frame {
    /*flex:1;*/
    /*width: 700px;*/
    height: 300px;
    position: relative;
  }
</style>
<script>
  module.exports = {
    data: function () {
      return {
        arrays:[
          [
            {"title":"ETC","src":"http://img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg"}, 
            {"title":'Weex',"src":"http://img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg"}, 
            {"title":'还款',"src":"http://img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg"}
          ],
          
          [
            {"title":'收款',"src":"http://img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg"}, 
            {"title":'付款',"src":"http://img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg"}, 
            {"title":'帐单',"src":"http://img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg"}
          ],
          
          [
            {"title":'网点',"src":"http://img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg"}, 
            {"title":'扫一扫',"src":"http://img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg"}, 
            {"title":'找货',"src":"http://img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg"}
          ]
      ],
      imageList: [
          { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
          { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
          { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
        ]
      }
    }
  }
</script>