微信小程序学习(6)-视图容器

最新推荐文章于 2025-07-17 09:33:49 发布

原创最新推荐文章于 2025-07-17 09:33:49 发布 · 3.5k 阅读

3 ·

CC 4.0 BY-SA版权

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

11 篇文章

订阅专栏

本文详细介绍了Flex布局的使用方法及ScrollView组件的应用技巧，包括如何设置滚动视图的高度和宽度，以及实现水平和垂直滚动的具体步骤。

1. View

flex-direction:row:横向布局模式；如果不设置该属性，默认为横向

flex-direction:column:纵向布局。

界面样式代码

注意：1.如果想要改模式有效，父控件必须设置显示方式为flex模式，display:flex;

2.要想控件的背景颜色显示出来，必须view设置大小，否则background-color属性无效。

2.scroll-view

<view class="section">
  <view class="section__title">vertical scroll</view>
  <!--如果是垂直滚动，必须设置scrollview的高度，切记-->
  <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>

  <view class="btn-area">
    <button size="mini" bindtap="tap">click me to scroll into view </button>
    <button size="mini" bindtap="tapMove">click me to scroll</button>
  </view>
</view>
<view class="section section_gap">
  <view class="section__title">horizontal 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>
</view>

界面渲染代码：

.section {
  display: flex;
  flex-direction: column;
}
/*设置垂直滚动每个滑动块高度*/
.scroll-view-item {
  height: 100px;
}
/*设置中间两个按钮的位置*/
.btn-area {
  height: 80px;
  justify-content: space-around;
  display: flex;
  flex-direction: column;
}
/*设置水平滚动视图，该属性必须设置为nowrap，表示超出范围也不换行
white-white-space属性的值
    normal: 自动换行(默认.内容超过父控件宽度换行)
    pre: 保持HTML源代码的空格与换行,等同与pre标签，识别空格和换行符
    nowrap: 不换行,超出范围的隐藏
    pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行
    pre-line: 同pre属性,但是遇到连续空格会被看作一个空格
    inherit: 继承
*/
.scroll-view_H {
  white-space: nowrap;
}
/*设置水平滚动的所有元素的大小,view默认为块元素，会自动换行，所以必须设置为行内元素*/
.scroll-view-item_H {
  width: 150px;
  height: 100px;
  display: inline-block; 
}
/*设置每个View的背景颜色*/
.bc_green {
  background-color: green;
}
.bc_red {
  background-color: red;
}
.bc_blue {
  background-color: blue;
}
.bc_yellow {
  background-color: yellow;
}

页面交互代码：

//logs.js
var util = require('../../utils/util.js')
var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    //元素的IDID，通过修改这个，实现点击把这个元素滚动到顶部
    toView: 'red',
    //默认你已经滚动的距离
    scrollTop: 100
  },
  upper: function(e) {
    console.log(e)
  },
  lower: function(e) {
    console.log(e)
  },
  scroll: function(e) {
    console.log(e)
  },
  //点击改变要滚动到顶部的元素ID
  tap: function(e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        //动态刷新数据，向上滚动一页
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  //点击一次滚动10
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

3.swiper 主要用于图片轮播，广告banner的展示

界面渲染代码：

.btn {
  display: flex;
  flex-direction: column;
  height: 400px;
  justify-content: space-around;
  text-align: center;
}