微信小程序 view和scroll-view的基本使用

成虚员

已于 2023-05-01 23:23:26 修改

阅读量239

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序

于 2023-02-22 17:14:10 首次发布

本文链接：https://blog.csdn.net/m0_48546501/article/details/129166593

版权

微信小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了微信小程序中用于布局和滚动的view及scroll-view组件，scroll-y和scroll-x属性分别用于纵向和横向滚动。同时，讲解了swiper和swiper-item组件，用于实现轮播图功能，包括indicator-dots和autoplay等属性的用法。

摘要由CSDN通过智能技术生成

微信小程序 view和scroll-view的基本使用

①view

普通视图区域
类似于HTML中的div，是一个块级元素
常用来实现页面的布局效果

②scroll-view

可滚动的视图区域
常用来实现滚动列表效果

scroll-y属性实现纵向滚动效果
wxml的基本代码：

<scroll-view  scroll-y>
<view>A<view>
<view>B<view>
<view>C<view>
</scroll-view>

scroll-x属性实现横向滚动效果

<scroll-view scroll-x>
<view>A<view>
<view>B<view>
<view>C<view>
</scroll-view>

③swiper和swiper-item

轮播图容器组件和轮播图item组件

<!-- indicator-dots显示面板指示点 autoplay轮播图自动滑动 -->
<swiper indicator-dots autoplay>
  <!-- 第1项 -->
  <swiper-item>
		<image src="../../image/1.jpg" class="item"></image>
  </swiper-item>
  <!-- 第2项 -->
  <swiper-item>
    	<image src="../../image/2.jpg" class="item"></image>
  </swiper-item>
  <!-- 第3项 -->
  <swiper-item>
    	<image src="../../image/3.jpg" class="item"></image>
  </swiper-item>
</swiper>

swiper组件的常用属性

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板指示点
indicator-color	color	rgba(0,0,0,.3)	指示点颜色
indicator-active-color	color	#000000	当前选中的指示点颜色
autoplay	boolean	false	是否自动切换
interval	number	5000	自动切换时间间隔
circular	boolean	false	是否采用衔接滑动