微信小程序-UI控件的使用(4)

最新推荐文章于 2024-05-26 20:06:59 发布

原创最新推荐文章于 2024-05-26 20:06:59 发布 · 497 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #控件

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

11 篇文章

订阅专栏

本文详细介绍了微信小程序中的布局方法及scroll-view与swiper组件的使用技巧。通过实例展示了view组件的不同布局方式，包括水平和垂直布局，并解释了scroll-view组件如何实现水平和垂直滚动效果，以及swiper组件如何实现轮播图功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考微信官方demo敲的例子：https://mp.weixin.qq.com/debug/wxadoc/dev/component/view.html?t=2017112

1、view的布局方式：

flex-direction:row

<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"></view>
        <view class="flex-item bc_red"></view>
        <view class="flex-item bc_blue"></view>
      </view>
    </view>

这里写图片描述

flex-direction: column

 <view class="section">
      <view class="section__title">flex-direction: column</view>
      <view class="flex-wrp" style="height: 300px;flex-direction:column;">
        <view class="flex-item bc_green"></view>
        <view class="flex-item bc_red"></view>
        <view class="flex-item bc_blue"></view>
      </view>
    </view>

这里写图片描述

justify-content: flex-start，justify-content: flex-end;，justify-content: center

<view class="section">
      <view class="section__title">justify-content: flex-start</view>
      <view class="flex-wrp" style="flex-direction:row;justify-content: flex-start;">
        <view class="flex-item bc_green"></view>
        <view class="flex-item bc_red"></view>
        <view class="flex-item bc_blue"></view>
      </view>
    </view>
    <!--  -- -- -- -- --      section   -- -- -- -- -- -- --   -->
    <view class="section">
      <view class="section__title">justify-content: flex-end</view>
      <view class="flex-wrp" style="flex-direction:row;justify-content: flex-end;">
        <view class="flex-item bc_green"></view>
        <view class="flex-item bc_red"></view>
        <view class="flex-item bc_blue"></view>
      </view>
    </view>

    <!--  -- -- -- -- --      section   -- -- -- -- -- -- --   -->
    <view class="section">
      <view class="section__title">justify-content: center</view>
      <view class="flex-wrp" style="flex-direction:row;justify-content: center;">
        <view class="flex-item bc_green"></view>
        <view class="flex-item bc_red"></view>
        <view class="flex-item bc_blue"></view>
      </view>
    </view>

这里写图片描述

justify-content: space-between,justify-content: space-around

<view class="section">
      <view class="section__title">justify-content: space-between</view>
      <view class="flex-wrp" style="flex-direction:row;justify-content: space-between;">
        <view class="flex-item bc_green"></view>
        <view class="flex-item bc_red"></view>
        <view class="flex-item bc_blue"></view>
      </view>
    </view>

    <!--  -- -- -- -- --      section   -- -- -- -- -- -- --   -->
    <view class="section">
      <view class="section__title">justify-content: space-around</view>
      <view class="flex-wrp" style="flex-direction:row;justify-content: space-around;">
        <view class="flex-item bc_green"></view>
        <view class="flex-item bc_red"></view>
        <view class="flex-item bc_blue"></view>
      </view>
    </view>

这里写图片描述

align-items: flex-end , align-items: center

<view class="section">
      <view class="section__title">align-items: flex-end</view>
      <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: flex-end">
        <view class="flex-item bc_green"></view>
        <view class="flex-item bc_red"></view>
        <view class="flex-item bc_blue"></view>
      </view>
    </view>

    <!--  -- -- -- -- --      section   -- -- -- -- -- -- --   -->
    <view class="section">
      <view class="section__title">align-items: center</view>
      <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: center">
        <view class="flex-item bc_green"></view>
        <view class="flex-item bc_red"></view>
        <view class="flex-item bc_blue"></view>
      </view>
    </view>

这里写图片描述

2、scroll-view(水平／垂直方向)

水平方向

<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
        <view id="green" class="scroll-view-item bc_green"></view>
        <view id="red" class="scroll-view-item bc_red"></view>
        <view id="yellow" class="scroll-view-item bc_yellow"></view>
        <view id="blue" class="scroll-view-item bc_blue"></view>
      </scroll-view>

垂直方向

<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
        <view id="green" class="scroll-view-item_H bc_green"></view>
        <view id="red" class="scroll-view-item_H bc_red"></view>
        <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
        <view id="blue" class="scroll-view-item_H bc_blue"></view>
      </scroll-view>

bindscrolltoupper：滚动到顶部所触发的事件
bindscrolltolower：滚动到底部所触发的事件
bindscroll：滚动时所触发的事件
scroll-into-view：滚动到哪个视图 scroll-top：滚动到顶部

这里写图片描述

3、swiper
swiper.wxml

<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
                    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
                <block wx:for-items="{{imgUrls}}">
                    <swiper-item>
                        <image src="{{item}}"></image>
                        <!--<view class="swiper-item bc_{{item}}"></view>-->
                    </swiper-item>
                </block>
            </swiper>

swiper.js

Page({
    data: {
       imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
      ],
        indicatorDots: true,
        vertical: false,
        autoplay: false,
        interval: 3000,
        duration: 1000
    }
})

indicator-dots:是否显示面板指示点
vertical:是否为垂直方向
autoplay：是否自动播放
interval：自动切换时间间隔
duration：动画时长
这里写图片描述