视图容器控件

image.png

2019年12月24日

一.view

image.png image.png

二.scroll-view

image.png

顶部滚动菜单实现

image.png

.scroll-view_H {
  height: 40px;
  display: flex;
  flex-direction: row;
  margin-left: 5px;
}

.select {
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 14px;
  font-weight: bold;
}

.normal {
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 14px;
}

3.顶部导航栏切换效果

var app = getApp()
Page({
  data: {
    flag: 0,
  },
  onLoad: function() {
    
  },
  switchNav: function(e) {
    var id = e.target.id;
    var page = this;
    if (this.data.flag == id) {
      return false;
    } else {
      page.setData({
        flag: id
      });
    }
  }
  
})

三.swiper

顶部导航栏切换效果

image.png

四.movable-view

image.png

五.cover-view cover-image 一般使用在地图和视频等控件做覆盖用的