• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

  • 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}


鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
微信近期暂时下架的几类小程序！发布时间：2022-07-18
下一篇：
微信小程序实现部分双向数据绑定（为input、picker、textarea编写统一的更新数据逻辑 ...发布时间：2022-07-18
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap