微信小程序常用视图标签

一、view

相当于HTML中的div标签,块元素,一般搭配伸缩布局使用

二、scroll-view

实现滚动效果 scroll-y竖直滚动,scroll-x横向滚动

<scroll-view class="scroll-box" scroll-y>
  <view>导航1</view>
  <view>导航2</view>
  <view>导航3</view>
  <view>导航4</view>
  <view>导航5</view>
  <view>导航6</view>
</scroll-view>

在wxss中设置样式

.scroll-box view{
  width:100px;
  height:40px;
  background-color: pink;
  border:1px solid #000;
}
.scroll-box{
  width: 100px;
  height:200px;
}

 大盒子高度要小于所有小盒子加起来的高度这样才可以实现滚动

三、swiper-item

实现轮播图

wxml中代码如下:

<swiper indicator-dots="true" 	indicator-active-color="red" 	autoplay 	interval="3000">
  <swiper-item>
    <image src="/images/1.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/2.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/3.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/4.jpg"></image>
  </swiper-item>
</swiper>

 参照开发文档如下:

 四、button

按钮 

 

<button type="primary">测试</button>
<button type="primary" plain>测试</button>
<button type="primary" size="mini" plain>测试</button>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值