上一篇：
微信小程序云开发项目-个人待办事项-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
})
}
},
