微信小程序基础学习三

微信小程序基础学习三

微信小程序云开发见大佬博文云开发
小案例 支出收入tab切换

使用组件

使用时要在主页面json引入

{
  "usingComponents": {
    "tab":"../../component/tabs/tab",
    "iconList":"../../component/iconList/iconList"
  },
  "navigationBarTitleText":"记一笔",
  "navigationBarTextStyle": "black"

}

父页面html，其中tab是顶部收入支出的tab ，iconList是餐饮列表组件，父子组件传值同VUE类似

<!--pages/edit/edit.wxml-->
<view class="edit">
    <!-- 顶部导航 -->
    <tab active-tab="{{activeTab}}" period-list="{{periodList}}" bind:changePeriodType='changePeriodType'></tab>
    <iconList icon-list="{{iconList}}"></iconList>
</view>

主页面js文件

data: {
    periodList: [
        {
            id: 'outcome',
            text: '支出'
        },
        {
            id: 'income',
            text: '收入'
        },
    ],
    activeTab: 'outcome',
    //  收入支出种类
    iconList: []
},
// 请求收入支出种类列表 云开发请求数据 
getIconList() {
    wx.cloud.database().collection('inout-type').where({
        type: this.data.activeTab
    }).get().then(res => {
        console.log('请求收入支出种类列表=》', res);
        this.setData({
            iconList: res.data
        })
    })
},
// 收入支出切换事件
changePeriodType(e) {
    console.log(e, '<=收入支出切换事件')
    this.setData({
        activeTab: e.detail.params.type
    })
    // 重新查询列表
    this.getIconList();

},

子页面html

<view class='period'>
<view><text wx:for="{{periodList}}"   class="item {{ activeTab == item.id ? 'bluecss':''}}" wx:key="id"  bindtap="changePeriodType" data-type="{{item.id}}">{{item.text}}</text></view>
</view>

子页面js

// component/tabs/tab.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    activeTab: {
      type: String,
      value: ''
    },
    periodList: {
      type: Array
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
 tab切换事件
    changePeriodType(e) {
 
      let a = e.target.dataset
      this.triggerEvent('changePeriodType',{params:a})
    }
  },
  attached() {
  

  }
})

云开发数据表

右侧数据权限记得修改 ，不然很容易出现请求数据时空的异常情况

哈哈哈 快乐的一天又结束了