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

 更新时间:2022年05月23日 09:05:40   作者:gyuei  
这篇文章主要为大家详细介绍了小程序实现页面给自定义组件赋值,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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实现跳一跳小游戏

    js实现跳一跳小游戏

    这篇文章主要为大家详细介绍了js实现跳一跳小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • js获取json中key所对应的value值的简单方法

    js获取json中key所对应的value值的简单方法

    下面小编就为大家带来一篇js获取json中key所对应的value值的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 使用uniapp打包微信小程序时主包和vendor.js过大解决(uniCloud的插件分包)

    使用uniapp打包微信小程序时主包和vendor.js过大解决(uniCloud的插件分包)

    每个使用分包小程序必定含有一个主包,所谓的主包,即放置默认启动页面/TabBar页面,以及一些所有分包都需用到公共资源/JS 脚本,下面这篇文章主要给大家介绍了关于使用uniapp打包微信小程序时主包和vendor.js过大解决的相关资料,,需要的朋友可以参考下
    2023-02-02
  • checkbox全选所涉及到的知识点介绍

    checkbox全选所涉及到的知识点介绍

    checkbox全选涉及到的知识点比如IE里起作用,火狐不起作用,getElementById()与getElementsByName()的区别等等
    2013-12-12
  • javascript代码简写的几种常用方式汇总

    javascript代码简写的几种常用方式汇总

    任何一种编程语言的简写小技巧都是为了帮助你写出更简洁、更完善的代码,让你用更少的编码实现你的需求,这篇文章主要给大家介绍了关于javascript代码简写的几种常用方式,需要的朋友可以参考下
    2021-08-08
  • JavaScript新功能介绍之findLast()和findLastIndex()

    JavaScript新功能介绍之findLast()和findLastIndex()

    最近工作中遇到了一个关于查找数组里面的目标元素的方法,所以下面这篇文章主要给大家介绍了关于JavaScript新功能之findLast() 和findLastIndex()的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • javascript原型继承工作原理和实例详解

    javascript原型继承工作原理和实例详解

    这篇文章主要为大家详细介绍了javascript原型继承,阐明什么是原型继承,以及在JavaScript中究竟如何使用原型继承,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • JavaScript数组Array的一些常用方法总结

    JavaScript数组Array的一些常用方法总结

    JavaScript的Array对象是用于构造数组的全局对象,数组是类似于列表的高阶对象,下面这篇文章主要给大家介绍了关于JavaScript数组Array的一些常用方法,需要的朋友可以参考下
    2021-11-11
  • js 事件对象 鼠标滚轮效果演示说明

    js 事件对象 鼠标滚轮效果演示说明

    第三篇,继续总结事件对象 先看看监听鼠标滚轮事件能帮我们做什么
    2010-05-05
  • 一文理解JavaScript装饰器模式

    一文理解JavaScript装饰器模式

    这篇文章主要介绍了一文理解JavaScript装饰器模式,文章基于JavaScript的相关资料展开详细介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-04-04

最新评论