小程序样例4:个人中心+我的书单

基本功能:

1、展示个人基本信息:头像、昵称 、读书时间统计

2、邮件列表,点击加入计划跳转到书架

3、今日任务 学习进度

4、邮件滑动到最末尾或者最开始,会有弹框提示:

5、图书搜索框

代码分析:

1、邮件展示和数据结构:

javascript 复制代码
{
                id: '12312312311231',
                bgImgUrl: 'https://t7.baidu.com/it/u=3582358516,1059101166&fm=193&f=GIF',
                digest: {
                    author_img: 'https://t7.baidu.com/it/u=430982779,3847086655&fm=193&f=GIF',
                    author_name: '熊猫老师',
                    author_des: '宣传部',
                    title: ""阅读推行赠书计划"已经开始",
                    content: {
                        button: {
                            text: '加入计划',
                            url: '/pages/booklist/booklist',
                            eventHandler: 'goToUrl'
                        },
                        other: '或者到【我的--邀请好友加入】查看'
                    }
                }
            }

可以动态设置按钮的文本、参数、按钮的响应事件。

XML实现:

通过swiper组件实现

button组件内容------文本和事件响应函数、传递参数都是通过数据结构定义。

html 复制代码
<!--滑块-->
    <swiper class="swipe" duration="600" bindchange="changeEmail" current="{{currentEmail}}">
      <block wx:for="{{emails}}" wx:key="id">
        <swiper-item class="{{index == currentEmail? 'active': ''}}">
          <view>
            <view class="author">
              <image src="{{item.digest.author_img}}" mode="scaleToFill"></image>
              <view>
                <text class="name">{{item.digest.author_name}}</text>
                <br />
                <text class="des">{{item.digest.author_des}}</text>
              </view>
            </view>
            <view class="title">{{item.digest.title}}</view>
            <view class="content">
              <button wx:if="{{item.digest.content.button}}" bindtap="{{item.digest.content.button.eventHandler}}" data-gotoUrl="{{item.digest.content.button.url}}">{{item.digest.content.button.text}}</button>
              <text class="other">{{item.digest.content.other}}</text>
            </view>
          </view>
          <image src="{{item.bgImgUrl}}" class="slide-image" mode="scaleToFill" />
        </swiper-item>
      </block>
    </swiper>
  </view>

2、书架数据结构比较简单:

javascript 复制代码
{
        bookId: '123123121231231',
        img: 'https://www.biqugeuu.com/files/article/image/0/176/176s.jpg',
        bookName: '大主宰',
        author: '烟雨江南',
        bookDes: '大千世界,位面交汇,万族林立,群雄荟萃,一位位来自下位面的天之至尊,在这无尽世界,演绎着令人向往的传奇,追求着那主宰之',
        isRead: true,
        isShow: true //判断是不是搜索结果
      }

通过isShow来决定页面是否显示,正常项目是通过后台接口获取数据,然后界面只是展示,不做过滤动作。

3、最近6个月数据计算:

javascript 复制代码
allMonths: function () {
    var resultArray = [];
    var today = new Date();
    var month = today.getMonth();
    // todo给出是否有记录的判断
    resultArray.push({
      monthCname: Util.eNumToCNum(Math.abs(month)) + '月',
      hasRecord: false
    });
    for (var i = 1; i <= 6; i++) {
      resultArray.push({
        monthCname: Util.eNumToCNum(Math.abs(month - i < 0 ? month + 12 - i : month - i)) + '月',
        hasRecord: true
      });
    }
    return {
      headerText: today.getFullYear() + '年' + resultArray[0].monthCname,
      showMonths: resultArray.reverse()
    }
  },

4、弹框数据显示控制代码:

通过setTimeout来控制3秒后隐藏。 也可以通过wx.showToast接口实现

javascript 复制代码
if(currentIndex <= 0){
            //提示用户当前为第一封邮件
            self.setData({err_tips_data: {err_tips_show: true, err_tips_text: '当前为第一封邮件'}});
            setTimeout(function(){
                self.setData({err_tips_data: {err_tips_show: false, err_tips_text: ''}});
            }, 3000);
        }

引用组件:

html 复制代码
<import src="../component/err_tips/err_tips.wxml" />
<template is="err_tips" data="{{err_tips_data}}" />
html 复制代码
<template name="err_tips">
  <view hidden="{{!err_tips_data.err_tips_show}}" class="err_tips">
      <div class="weui-mask_transparent"></div>
      <div class="weui-err_tips">
          <p class="weui-err_tips__content" >{{err_tips_data.err_tips_text}}</p>
      </div>
  </view>
</template>

代码目录结构:

完整代码下载:

https://download.csdn.net/download/u200814342A/88789478?spm=1001.2014.3001.5503

个人小程序创业项目 #小程序://朋友圈子/VMEWRjrOTum4Soa 有想法的朋友可以一起交流下~

相关推荐
Yz987615 分钟前
Hive安装-内嵌模式
大数据·linux·数据仓库·hive·hadoop·hdfs·bigdata
多练项目25 分钟前
公开仓库改私有再配置公钥后Git拉取仍需要输入用户名的问题
运维·git
cqbzcsq1 小时前
Nginx简易配置将内网网站ssh转发到外网
运维·nginx·ssh
SmallBambooCode1 小时前
【人工智能】阿里云PAI平台DSW实例一键安装Python脚本
linux·人工智能·python·阿里云·debian·脚本·模型训练
纯小白是我1 小时前
CentOS 7系统中更改YUM源为阿里云的镜像源
linux·阿里云·centos
嵌入式Linux,2 小时前
BUG: scheduling while atomic
linux·运维·服务器·bug
小兔子酱#2 小时前
【Linux 29】传输层协议 - UDP
linux·运维·服务器·网络·网络协议·udp
CYRUS_STUDIO2 小时前
Android下的系统调用 (syscall),内联汇编syscall
android·linux·汇编语言
想不到好名字了()2 小时前
负载均衡式在线oj项目开发文档2(个人项目)
linux·网络·c++
liuhaoodng6262 小时前
浮动路由:实现出口线路的负载均衡冗余备份。
运维·网络·网络协议·负载均衡