专业编程基础技术教程

网站首页 > 基础教程 正文

微信小程序笔记(三)---视图容器(微信小程序前端可视化开发工具)

ccvgpt 2024-07-17 18:01:54 基础教程 28 ℃

  • view可以理解成html中的div。是一个视图容器。相当于安卓中的viewgroup 在wxml文件中使用 在style中可以设置display方式,缺省为block布局,flex为弹性布局,弹性方向flex-direction:row|column 还可以设置弹性项目在主轴线上的对其方式justify-content:flex-start | flex-end | center | space-between | space-around,自己理解

    微信小程序笔记(三)---视图容器(微信小程序前端可视化开发工具)

<view

class="flex-wrp"

style="display:flex;

flex-direction:row;

justify-content:center">

<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中还有属性dataset、offsetLest

    dataset属性是携带私有数据,用法是data-name,如: <view data-name="杨震宇" data-age="25"/>

  • swiper滑动视图块(安卓中的viewpager)

indicator-dots:是否显示指示点

autoplay:是否自动播放

current:当前页的索引

interval:自动切换的时间间隔

duration:滑动的动画时长

vertical:是否竖直滑动,默认false,就是水平滑动

bindchange:页面改变时触发事件

<swiper-item>标签只能用在swiper中,里面再包含每个组件或视图

  • scroll-view滚动视图如果为竖直方向必须设置高度

scroll-x/y:滚动方向bindscrolltoupper:滚动到左上时触发bindscrolltolower:滚动到右下时触发bindscroll:滚动触发upper-threshold:距离左上触发的距离,默认50pxlower-threshold:距离左下触发的距离scroll-into-view:传元素的id,当滚动到该元素时元素顶部对齐滚动区域顶部scroll-top:竖直滚动条位置scroll-lest:水平滚动条位置

最近发表
标签列表