码迷,mamicode.com
首页 > 微信 > 详细

微信小程序(3)——常用的组件

时间:2017-07-21 01:23:49      阅读:403      评论:0      收藏:0      [点我收藏+]

标签:滑动方向   image   动画   code   ble   play   alt   dex   pat   

  • view:

    view是小程序中的视图容器之一,似于html中的<div>标签

<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
  • image

    image是小程序中的媒体组件,顾名思义就是图片,类似于html中的<image>标签

<view class="section__ctn">
        <image style="width: 200px; height: 200px;  src="../../demo.png"></image>
</view>
  • text

    text是小程序基础内容中的文本,在小程序中除了该节点外其他节点均无法长按选中。

<view>
    <text>Hello world</text>    
</view>
  • swiper

    swiper是小程序中的滑块视图容器, 

<swiper indicator-dots="true" autoplay="true" interval="5000">
  <!-- swiper-item可以多个-->
  <swiper-item> <image src="/images/1.png"></image> </swiper-item> <swiper-item> <image src="/images/2.png"></image> </swiper-item> <swiper-item> <image src="/images/3.png"></image> </swiper-item> </swiper>
属性名类型默认值说明最低版本
indicator-dots Boolean false 是否显示面板指示点  
indicator-color Color rgba(0, 0, 0, .3) 指示点颜色 1.1.0
indicator-active-color Color #000000 当前选中的指示点颜色 1.1.0
autoplay Boolean false 是否自动切换  
current Number 0 当前所在页面的 index  
interval Number 5000 自动切换时间间隔  
duration Number 500 滑动动画时长  
circular Boolean false 是否采用衔接滑动  
vertical Boolean false 滑动方向是否为纵向  
bindchange EventHandle   current 改变时会触发 change 事件,event.detail = {current: current, source: source}

技术分享

微信小程序(3)——常用的组件

标签:滑动方向   image   动画   code   ble   play   alt   dex   pat   

原文地址:http://www.cnblogs.com/net-safe/p/7215435.html

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