首页 > 代码库 > 微信小程序(3)——常用的组件

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

2024-11-01 11:13:39   210人阅读

  • 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-dotsBooleanfalse是否显示面板指示点 
indicator-colorColorrgba(0, 0, 0, .3)指示点颜色1.1.0
indicator-active-colorColor#000000当前选中的指示点颜色1.1.0
autoplayBooleanfalse是否自动切换 
currentNumber0当前所在页面的 index 
intervalNumber5000自动切换时间间隔 
durationNumber500滑动动画时长 
circularBooleanfalse是否采用衔接滑动 
verticalBooleanfalse滑动方向是否为纵向 
bindchangeEventHandle current 改变时会触发 change 事件，event.detail = {current: current, source: source}

技术分享

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


联系
我们