码迷,mamicode.com
首页 > 移动开发 > 详细

weexapp 开发流程(三)其他页面创建

时间:2017-12-17 13:20:29      阅读:987      评论:0      收藏:0      [点我收藏+]

标签: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 开发流程(三)其他页面创建

标签:color   relative   osi   img   wrapper   java   组件   调用   auto   

原文地址:http://www.cnblogs.com/crazycode2/p/8051665.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!