专栏首页iKcamp微信小程序教学第三章第三节(含视频):小程序中级实战教程:视图与数据关联

微信小程序教学第三章第三节(含视频):小程序中级实战教程:视图与数据关联

§ 视图与数据关联

本文配套视频地址: https://v.qq.com/x/page/z0554wyswib.html

开始前请把 ch3-3 分支中的 code/ 目录导入微信开发工具  

首先

首先我们要做的是什么呢?直接写模板逻辑吗?不是,给用户以良好的提示是很重要的,所以,我们要做的第一件事就是,加载中...

这里我们采用官方 loading 组件,所以现在就可以直接拿来用了。

修改 index.wxml,增加 loading 组件。很明显,变量 hiddenLoading 控制着它的展示与隐藏:

<loading hidden="{{hiddenLoading}}">数据加载中</loading>

然后修改 index.js,处理 loading 组件的状态逻辑值 hiddenLoading

// 刚进入列表页面,就展示loading组件,数据加载完成后隐藏
onLoad (options) {
  this.setData({
    hiddenLoading: false
  })
  this.requestArticle()
},
// 列表渲染完成后,隐藏 loading组件
renderArticle (data) {
  if (data && data.length) {
    let newList = this.data.articleList.concat(data);
    this.setData({
    articleList: newList,
    hiddenLoading: true
    })
  }
}

分析页面结构

通过分析静态页面可以看出,这个列表是按照 为单位来分段,在每天的文章里又按照 文章 为单位继续细分。所以可以知道这个 wxml 的主体结构是循环套循环。所以我们可以初步写出下面的结构:

<loading hidden="{{hiddenLoading}}">数据加载中</loading>
<view class="wrapper">
  <view wx:for="{{ articleList }}" wx:for-item="group" wx:key="{{ group.date }}" class="group">
    <view wx:for="{{ group }}" wx:for-item="item" wx:key="{{ item.contentId }}"></view>
  </view>
</view>

这里有一点需要 注意:在 wxml 做循环嵌套的时候,一定要重新定义 wx:for-item 字段。因为 wxml 循环中当前项的下标变量名默认为 index,当前项的变量名默认为 item。如果没有重新定义 item,在内层循环里通过 item 取到的值其实是外层循环的值。

官方 API - 列表渲染

下面我们就详细的分析下具体的结构,首先,每一天都有一个日期做开头,然后下面是一天的 4 篇文章。每篇文章分为左右结构,左边是标题,最多 3 行,超过的文字就用 … 表示。右边是一张文章的封面图,如果没有封面图就用默认的封面图。上面的日期如果是今天就显示今天,否则就直接显示月日,所以可以把 wxml 结构丰富成下面的样子:

<loading hidden="{{hiddenLoading}}">数据加载中</loading>
<view class="wrapper">
    <!--repeat-->
    <view wx:for="{{ articleList }}" wx:for-item="group" wx:key="{{ group.date }}" class="group">
        <view class="group-bar">
            <view class="group-title {{ group.formateDate === '今日' ? 'on' : ''}}">{{ group.formateDate }}</view>
        </view>
        <view class="group-content">
            <!--repeat-->
            <view wx:for="{{ group.articles }}" wx:for-item="item" wx:key="{{ item.contentId }}" data-item="{{ item }}" class="group-content-item">
                <view class="group-content-item-desc ellipsis-multi-line ellipsis-line-3">{{ item.title }}</view>
                <image mode="aspectFill" class="group-content-item-img" src="{{ item.cover || defaultImg.coverImg }}" ></image>
            </view>
        </view>
    </view>
</view>

这里有一个图片处理的属性可以看看相应的 API 了解下:

官方 API - 图片处理

页面结构搭建完了吗?并没有,还有一件很重要的事情要做。当我们的所有内容都展示完了,我们要友好的提醒用户,所以需要在最底端加上一个提示,把这些交互考虑进去之后的 wxml 就是下面这样的:

<!--index.wxml-->
<loading hidden="{{hiddenLoading}}">数据加载中</loading>
<view class="wrapper">
    <!--repeat-->
    <view wx:for="{{ articleList }}" wx:for-item="group" wx:key="{{ group.date }}" class="group">
        <view class="group-bar">
            <view class="group-title {{ group.formateDate === '今日' ? 'on' : ''}}">{{ group.formateDate }}</view>
        </view>
        <view class="group-content">
            <!--repeat-->
            <view wx:for="{{ group.articles }}" wx:for-item="item" wx:key="{{ item.contentId }}" data-item="{{ item }}" class="group-content-item">
                <view class="group-content-item-desc ellipsis-multi-line ellipsis-line-3">{{ item.title }}</view>
                <image mode="aspectFill" class="group-content-item-img" src="{{ item.cover || defaultImg.coverImg }}" ></image>
            </view>
        </view>
    </view>

    <view hidden="{{ hasMore }}" class="no-more">暂时没有更多内容</view>
</view>

到此,列表的页面与大体数据可以说是告一段落了,下一节我们介绍下如何增加阅读标识功能及分享功能、下拉更新功能。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序教学第四章第一节(含视频):小程序中级实战教程:详情-页面制作

    详情 - 页面制作 本文配套视频地址: https://v.qq.com/x/page/o0555o20xjd.html 开始前请把 ch4-1 分支...

    iKcamp
  • 微信小程序教学第三章(含视频):小程序中级实战教程:列表-静态页面制作

    § 列表 - 开发准备 本文配套视频地址: https://v.qq.com/x/page/f0554syejjd.html 开始前请把 ch3-1 分...

    iKcamp
  • 微信小程序基于最新版1.0开发者工具分享-小试牛刀(视频)+发布流程

    第一章:小程序初级入门教程 小试牛刀【含视频】 视频地址:https://v.qq.com/x/page/i0554akzobq.html 这一章节中,我们尝...

    iKcamp
  • 小程序上传各种文件,阅览多种格式(word,excel,ppt,pdf)文件

    我们用小程序与网站交互,那么无非是上传文件,发布文章,阅览文件(主要是office和pdf)和文章。

    hotqin888
  • 小灯灯实战系列《三》微信小程序:仿今日头条(下)

    接着上一篇  上一篇文章中,我们已经完成了头条的新闻列表、新闻详情功能了,但是还存在一些值得优化的地方,以及评论功能没有加上。  欢迎Star Github开源...

    极乐君
  • 微信小程序实现各种特效实例

    写在前面 最近在负责一个微信小程序的前端以及前后端接口的对接的项目,整体上所有页面的布局我都已经搭建完成,里面有一些常用的特效,总结一下,希望对大家和我都能有所...

    okaychen
  • spring 自定义配置属性

    完成以上几步后构建项目就会在META-INF下生成文件spring-configuration-metadata.json里面包含配置属性的信息 在IDEA环...

    路过君
  • 微信小程序的生命周期学习笔记-应用篇

    在我们学习微信小程序的过程当中,我们会参考很多资料。在这些资料中,我们经常能够看到“生命周期”四个字,在前面的课程中也提到过。在这里做一个说明。

    面向对象思考
  • Python数据分析之anaconda安装和使用

    今天开始学习Python数据分析了,说到Python数据分析,大家都会推荐使用anaconda,但作为一个初学者,总是很多疑虑,但在实践中解决了一部分,先和大家...

    罗罗攀
  • 『No16: 如何快速熟悉一个项目』

    之所以讲这个话题,主要是最近新入职,因为是创业公司,不像大公司里的节奏,给你时间学习,创业公司需要你快速的融入环境,快速的熟悉业务代码,快速的实现需求。坦率的讲...

    谢伟

扫码关注云+社区

领取腾讯云代金券