weexapp 開發流程（三）其他頁面建立

標籤：color   relative   osi   img   wrapper   java   組件   調用   auto   

1.首頁

（1）輪播圖

步驟一：建立 輪播圖 組件（Slider.vue）

src / assets / components / Slider.vue

<!-- 輪播圖 組件 --><template>  <slider class="slider" auto-play="true" interval="5000" @change="onchange">    <div class="frame" v-for="img in imageList">      <image class="image" resize="cover" :src="img.src"></image>    </div>    <indicator class="indicator"></indicator>  </slider></template><style scoped>  .iconfont {    font-family:iconfont;  }  .image {    width: 750px;    height: 430px;  }  .slider {    width: 750px;    height: 430px;  }  .frame {    width: 750px;    height: 430px;    position: relative;  }  .indicator {    width: 750px;    height: 40px;    item-color: white;    item-selected-color: #b4282d;    item-size: 12px;    position: absolute;    bottom: 10px;    right: 0px;  }</style><script>  export default {    props:["imageList"],    data () {      return {      }    },    methods: {      onchange (event) {      }    }  }</script>

步驟二：頁面調用

src / assets / views / home.vue

<!-- 首頁 --><template>  <div class="wrapper">    <!-- 標題列 -->  <wxc-minibar      title="首頁"      right-button="N"      left-button="N"      background-color="#F2F3F4"      text-color="#333333"></wxc-minibar>    <!-- 滾動視圖 -->    <scroller class="main-list">      <!-- 輪播圖 -->      <kx-slider :imageList="Banners"></kx-slider>    </scroller>     </div></template><script>  // 引入輪播圖組件  import Slider from ‘../components/Slider.vue‘;  // 引入UI組件  import { WxcMinibar } from ‘weex-ui‘;  export default {    components: {      ‘kx-slider‘: Slider,      WxcMinibar    },    data () {      return {        Banners: [          { title: ‘‘, src: ‘http://app.kuitao8.com/images/banner/1.jpg‘},          { title: ‘‘, src: ‘http://app.kuitao8.com/images/banner/2.jpg‘},          { title: ‘‘, src: ‘http://app.kuitao8.com/images/banner/3.jpg‘}        ]      }    }  }</script><style scoped>  .wrapper{  }  .iconfont {    font-family:iconfont;  }  .main-list{    position: fixed;    top: 91px;    bottom: 90px;    left: 0;    right: 0;  }</style>

：

（2）滑動導覽列

weexapp 開發流程（三）其他頁面建立