微信小程序云开发项目-个人待办事项-03【主页】模块开发

上一篇：

微信小程序云开发项目-个人待办事项-02今日模块开发

https://blog.csdn.net/IndexMan/article/details/124497893

模块开发步骤

本篇介绍主页模块功能开发和代码展示，仅展示部分源码，详细项目代码请联系我获取。

搜索功能

界面代码

<!-- 搜索 -->
<view class="weui-search-bar {{inputShowed ? 'weui-search-bar_focusing' : ''}}" id="searchBar">
       <form class="weui-search-bar__form" aria-role="combobox" aria-haspopup="true" aria-expanded="{{inputVal.length > 0 ? 'true' : 'false'}}" aria-owns="searchResult">
           <view class="weui-search-bar__box">
               <i class="weui-icon-search"></i>
               <input aria-controls="searchResult" type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
               <view aria-role="button" aria-label="清除" class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput"></view>
           </view>
           <label class="weui-search-bar__label" bindtap="showInput">
               <i class="weui-icon-search"></i>
               <span class="weui-search-bar__text">搜索</span>
           </label>
       </form>
       <view aria-role="button" class="weui-search-bar__cancel-btn" bindtap="hideInput">取消</view>
   </view>

JS代码

showInput() {
        this.setData({
            inputShowed: true,
        });
    },
    hideInput() {
        this.setData({
            inputVal: '',
            searchTodos: [],
            inputShowed: false,
        });
    },
    clearInput() {
        this.setData({
            inputVal: '',
            searchTodos: [],
        });
    },
    inputTyping(e) {
        this.setData({
            inputVal: e.detail.value,
        })
        if (this.data.inputVal != '') {
            this.findTodosByInput()
        }
    },

分类统计

界面代码

<!-- 统计 -->
<view class="weui-flex row-tj">
    <view class="weui-flex__item" bindtap="goTodayList">
        <view class="row-tj-item">
            <view class="logo_num">
                <view class="iconfont icon-taiyang"></view>
                <view class="title">我的一天</view>
                <view class="icon-box__title num">
                    {{today_todo}}
                </view>
            </view>
        </view>
    </view>
</view>

JS代码

async onLoad(options) {
    let openid = wx.getStorageSync('openid') || await app.getOpenId();
    wx.showLoading({
        title: '载入数据中',
    });
    // 获取统计数据
    await this.getStat(openid);
    // 获取列表
    await this.getToDoGroup(openid);
    wx.hideLoading();
},

我的分组

界面代码

<!-- 列表 -->
<view class="weui-panel weui-panel_access">
    <view class="weui-panel__hd">我的分组</view>
    <view class="weui-panel__bd">
        <navigator wx:for="{{todo_groups}}" wx:key="index" url="/pages/list/index?group_id={{item._id}}" class="weui-media-box weui-media-box_text list-box" aria-role="option" open-type="navigate">
            <view class="left-title">
                <!-- <span class="iconfont icon-liebiaoqingdan"></span> -->
                <text class="weui-media-box__title">{{item.group_name}}</text>
                <text class="num">{{item.num}}</text>
            </view>
            <view class="right-arrow"></view>
        </navigator>
    </view>
</view>

JS代码

// 获取我的列表数据
async getToDoGroup(openid) {
    let res = await ydb.collection("todo_group").where(
        {
            _openid: openid
        }
    ).get({});
    let data = res.data;
    if (data.length > 0) {
        this.setData({
            todo_groups: data
        })
    }
},