小学期微信小程序实训篇4_自定义顶部tab菜单组件、常见三种定位（固定、相对、绝对定位）、弹性布局

目录

• 自定义顶部tabs菜单组件
• 常见的三种布局
• 弹性布局

一、自定义顶部tabs菜单组件

使用自定义组件实现tabs选项卡切换

1.注册组件

• a. 在根目录新建components文件夹，用来统一管理组件；
• b. 在components文件夹下新建组件文件夹；
• c. 选中文件夹右键新建components，会自动生成组件内容（4级文件结构）；

2.新建页面（父组件），引入组件

• a.在页面的json文件里，引入组件;

{
	  "usingComponents": {
	    "tabs":"/components/tabs/tabs"
	  }
	}

• b.在wxml文件里使用组件—<tabs titles="{{titles}}"><tabs>
• c.在js文件的data对象里定义titles数组

3.回到子组件

• a.在js文件里的properties对象里，拿到父组件传递过来的数组；

properties: {
   titles:{
     type:Array,
     value:[]
   }
  }

• b.在wxml文件里使用wx:for语法完成数组循环；

<view class="tabs_view">
    <view class="{{index==currentIndex?'tabs_item active':'tabs_item'}}" wx:for="{{titles}}" wx:key="id" data-index="{{index}}" bindtap="getIndex">
    {{item.text}}
    </view>
</view>

• c.在wxss文件里完成tab选项卡的样式；

.tab_view {
  display: flex;
  padding: 0 120rpx;
  justify-content: space-between;
}
.tab_item {
  width: 15%;
  height: 60rpx;
  line-height: 60rpx;
  color: #333;
  text-align: center;
}
.active {
  color: hotpink;
  border-bottom: 2px solid hotpink;
}

• d.绑定事件，拿到当前点击项的索引，高亮显示----》三元表达式！
• e.在js文件里使用this.triggerEvent(“aaaa”,index)方法传递参数给父组件。

methods: {
	    getIndex(e){
	      //console.log(e.currentTarget.dataset.index)
	      var index = e.currentTarget.dataset.index
	      this.triggerEvent('aaa',index)
	      this.setData({
	        currentIndex:index
	      })
	    }
	  }

4.回到父组件:

• a.在wxml页面绑定事件—》取子组件传递过来的参数；

<tabs titles="{{titles}}" bindaaa="receiveIndex"></tabs>

• b.在js文件完成获取子组件传递过来的参数；

receiveIndex(e){
   console.log(e.detail)
   this.setData({
    titleIndex:e.detail
 })

• c.在wxml使用条件渲染实现对应索引的盒子显示，不对应索引的盒子隐藏

<view wx:if="{{titleIndex==0}}">0</view>

条件渲染

• 条件渲染 : 满足了一定的条件 这个标签才会被显示出来 —— js里的if分之语句；
• 需求：tab选项卡切换效果 —— 点击导航栏，下方对应索引的盒子显示，其余盒子隐藏；
• 实现：固定语法

<!-- 为true则显示；false则不显示 -->
<view wx:if="{{ true }}" >0</view>
<view wx:if="{{ false }}" >0</view>
<!-- 根据获得的当前索引进行判断，得到布尔值 -->
<view wx:if="{{ titleIndex==0 }}" >0</view>

二、常见的三种布局

三种定位

• 固定定位fixd：相对于当前浏览器窗口
• 相对定位relative：相对于之前的位置的定位
• 绝对定位absolute：要求父相子绝 ，会一直沿着父链找到position:relative，直到找到page最顶端，此时就和固定定位类似

三、弹性布局

1.弹性布局的定位

/* pages/cart/cart.wxss */

.parent{
  width: 200px;
  height: 200px;
  background-color: hotpink;
  /* 开启弹性布局 */
  display: flex;

  /* 设置子元素水平居中 */
  justify-content: center;
}

.son{
  width: 100px;
  height: 100px;
  background-color: indigo;
}

直接可以在 父元素设置 子元素水平居中

justify-content还可以设置

• flex-start 左对齐
• flex-end 右对齐
• space-between 两边对齐

垂直方向上，可以使用align-items来设置

• center 垂直居中
• flex-start 上对齐
• flex-end 下对齐

2.弹性布局

什么是弹性布局

• 子元素数量多的情况下，超出父元素的宽度（高度）会被按照比例压缩
• 默认里面的元素是不换行的,可以设置换行flex-wrap: wrap;如配合width:50% 每行显示两个元素
• 可以通过在子元素中设置flex:xxx来按照比例显示子元素

举栗

/*精选大图*/
.cover_view {
  display: flex;
  /* 弹性布局里面换行 */
  flex-wrap: wrap;
}
.cover_item {
  width: 50%;
  border: 3px solid #fff;
}
.my_img {
  width: 100%;
}
/*月份*/
.title {
  padding:20rpx 10rpx;
  display: flex;
  /*设置元素对齐方式 --- 两边贴边，剩余空间平分*/
  justify-content: space-between;
}
.active {
  color:hotpink;
  /*设置文字加粗 --- 700加粗，400正常*/
  font-weight: 700;
}
.list {
  display: flex;
  flex-wrap: wrap;
}
.list_item {
  width: 33.33%;
  border: 3px solid #fff;
}

举栗