当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 小程序 之页面获取自定义组件中的值

小程序 之页面获取自定义组件中的值

2020年07月23日  | 移动技术网IT编程  | 我要评论
  1. 新建组件：在component下新建一个tabBar
    在这里插入图片描述
  2. 在组件的index.wxml中写如下代码：
<cover-view class="tab-bar">
	<cover-view class="tab-bar-border"></cover-view>
	<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="tabChange">
		<cover-image src="{{tabbarIndex === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
		<cover-view style="color: {{tabbarIndex === index ? selectedColor : color}}">{{item.text}}</cover-view>
	</cover-view>
</cover-view>
  1. 在组件的index.js中写如下代码：
Component({
	properties: {
	    list: {
	      type: Array,
	      value: []
	    },
	    selectedColor:{
	      type: String,
	      value:''
	    },
	    color:{
	      type: String,
	      value:''
	    },
	  },
	data: {
	    tabbarIndex: 0//默认显示第一个tab元素
	  },
	methods: {
	    //组件的点击事件
	    tabChange(e) {
	      //获取到底部栏元素的下标
	      let index = e.currentTarget.dataset.index;
	      this.setData({
	        tabbarIndex:index,
	      })
	      //triggerEvent获取组件的事件
	      //onMyEvent 页面传过来的点击事件名称
	      this.triggerEvent('onMyEvent',{
	        tabbarIndex:index,
	      })
	    },
	  }
  })

在这里插入图片描述

  1. 在页面pages/index/index.json中加入
{
  "navigationBarTitleText": "测试",
  "usingComponents": {
    "mp-tabbar": "../components/tabBar/index"
  }
}
  1. 在页面pages/index/index.wxml中加入
<view wx:if="{{tabbarIndex == 0}}">111111</view>
<view wx:if="{{tabbarIndex == 1}}">222222</view>
<view wx:if="{{tabbarIndex == 2}}">333333</view>
<mp-tabbar list="{{list}}" id='tabComponent' bind:onMyEvent="switchTab"></mp-tabbar>

在这里插入图片描述

  1. 在页面pages/index/index.js中加入
//获取组件传递出来的数据
  switchTab:function(e){
    let index = e.detail.tabbarIndex;
    this.setData({
      tabbarIndex:index
    })
    console.log(e.detail.tabbarIndex)
  }

在这里插入图片描述

  1. 运行
    在这里插入图片描述

本文地址：https://blog.csdn.net/gyueh/article/details/107484540

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网