欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

小程序实现页面给自定义组件赋值

时间:2022-06-07 09:21:01|栏目:JavaScript代码|点击:

本文实例为大家分享了小程序之页面给自定义组件赋值的具体代码,供大家参考,具体内容如下

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>

3.组件中的index.js结构如下:

Component({
  /**
 1. 组件的属性列表
   */
  options: {
    multipleSlots: true //在组件定义时的选项中启用多slot支持
  },
  properties: {
    list: {// 属性名
      type: Array,
      value: []
    },
    selectedColor:{// 属性名
      type: String,
      value:''
    },
    color:{// 属性名
      type: String,
      value:''
    },
  },

  /**
 2. 组件的初始数据
   */
  data: {
    tabbarIndex: 0//默认显示第一个tab元素
  },

  lifetimes: {
    attached() {}
  },

  /**
 3. 组件的方法列表
   */
  methods: {
    //组件的点击事件
    tabChange(e) {
      //获取到底部栏元素的下标
      let index = e.currentTarget.dataset.index;
      this.setData({
        tabbarIndex:index,
      })
  }
})

4.组件中的index.json结构如下:

{
  "component": true,
  "usingComponents": {}
}

5.组件的引用:在页面pages/index/index.json中加入

{
  "navigationBarTitleText": "测试",
  "usingComponents": {
    "mp-tabbar": "../components/tabBar/index"
  }
}

6.在页面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>

7.在页面pages/index/index.js中加入

data: {
    tabbarIndex:0,//默认显示市场
    color: "#555555",
    selectedColor: "#2ea7e0",
    //底部栏
    items: [{
        "text": "市场",
        "iconPath": "/images/bazaar.png",
        "selectedIconPath": "/images/tselected.png",
      },
      {
        "text": "充值",
        "iconPath": "/images/recharge.png",
        "selectedIconPath": "/images/recharge_selected.png",
      }, {
        "text": "车队",
        "iconPath": "/images/market.png",
        "selectedIconPath": "/images/market_selected.png",
      }
    ]
  },
  onShow: function () {
    this.tabComponent = this.selectComponent('#tabComponent');
    let selectedColor = this.data.selectedColor;
    let color = this.data.color;
    this.tabComponent.setData({
      selectedColor: selectedColor,
      color:color
   })
   console.log(this.tabComponent.data.tabbarIndex)
  },

8.最终效果如图:

上一篇:js实现移动端简易滑动表格

栏    目:JavaScript代码

下一篇:正则表达式(语法篇推荐)

本文标题:小程序实现页面给自定义组件赋值

本文地址:http://www.codeinn.net/misctech/204026.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有