微信小程序开发-新闻列表之新闻列表绑定

Myth丶恋晨 2022-06-11 02:26 351阅读 0赞

微信小程序开发-新闻列表之新闻列表绑定开发教程：

1、效果图预览

这里写图片描述

2、准备工作

在拿到效果图后不要先急着去写代码，而是要去分析一下页面的整体结构，用什么方式定位和布局。小程序里建议使用flex布局，因为小程序对flex的支持是很好的。

上一篇博客中完成了轮播图部分，接下来继续完成下面的新闻列表部分

3、wxml部分

新闻列表部分整体使用flex纵向布局比较合适，
先把页面内的元素标签和类名写好。

  1. <view class="post-container">
  2.       <view class="post-author-date">
  3.         <image class="post-author" src="{
  4.     {
  5.     item.avatar}}"></image>
  6.         <text class="post-date">{
  7.     {
  8.     item.date}}</text>
  9.       </view>
  10.       <text class="post-title">{
  11.     {
  12.     item.title}}</text>
  13.       <image class="post-image" src="{
  14.     {
  15.     item.imgSrc}}"></image>
  16.       <text class="post-content">{
  17.     {
  18.     item.content}}</text>
  19.       <view class="post-like">
  20.         <image class="post-like-image" src="{
  21.     {
  22.     item.view_img}}"></image>
  23.         <text class="post-like-font">{
  24.     {
  25.     item.reading}}</text>
  26.         <image class="post-like-image" src="{
  27.     {
  28.     item.collect_img}}"></image>
  29.         <text class="post-like-font">{
  30.     {
  31.     item.collection}}</text>
  32.       </view>
  33.     </view>
  36.    1 
  37.    2 
  38.    3 
  39.    4 
  40.    5 
  41.    6 
  42.    7 
  43.    8 
  44.    9 
  45.    10 
  46.    11 
  47.    12 
  48.    13 
  49.    14 
  50.    15 
  54.    1 
  55.    2 
  56.    3 
  57.    4 
  58.    5 
  59.    6 
  60.    7 
  61.    8 
  62.    9 
  63.    10 
  64.    11 
  65.    12 
  66.    13 
  67.    14 
  68.    15

4、wxss部分

  1. .post-container{
  2.   display: flex;
  3.   flex-direction: column;
  4.   margin-top: 20rpx;
  5.   margin-bottom: 40rpx;
  6.   background-color: #fff;
  7.   border-bottom: 1px solid #ededed;
  8.   border-top: 1px solid #ededed;
  9.   padding-bottom: 5px;
  10. }
  11. .post-author-date{
  12.   margin: 10rpx 0 20rpx 10rpx;
  13. }
  14. .post-author{
  15.   width: 60rpx;
  16.   height: 60rpx;
  17.   vertical-align: middle;
  18. }
  19. .post-date{
  20.   margin-left: 20rpx;
  21.   vertical-align: middle;
  22.   margin-bottom: 5px;
  23.   font-size: 26rpx;
  24. }
  25. .post-title{
  26.   font-size: 34rpx;
  27.   font-weight: 600;
  28.   color: #333;
  29.   margin-bottom: 10px;
  30.   margin-left: 10px;
  31. }
  32. .post-image{
  34.   width: 100%;
  35.   height: 340rpx;
  36.   margin: auto 0;
  37.   margin-bottom: 15px;
  38. }
  39. .post-content{
  40.   color: #666;
  41.   font-size: 28rpx;
  42.   margin-bottom: 20rpx;
  43.   margin-left: 20rpx;
  44.   letter-spacing: 2rpx;
  45.   line-height: 40rpx;
  46. }
  47. .post-like{
  48.   font-size: 13px;
  49.   flex-direction: row;
  50.   line-height: 16px;
  51.   margin-left: 10px;
  52. }
  53. .post-like-image{
  54.   width: 16px;
  55.   height: 16px;
  56.   margin-right: 8px;
  57.   vertical-align: middle;
  58. }
  59. .post-like-font{
  60.   vertical-align: middle;
  61.   margin-right: 20px;
  62. }
  65.    1 
  66.    2 
  67.    3 
  68.    4 
  69.    5 
  70.    6 
  71.    7 
  72.    8 
  73.    9 
  74.    10 
  75.    11 
  76.    12 
  77.    13 
  78.    14 
  79.    15 
  80.    16 
  81.    17 
  82.    18 
  83.    19 
  84.    20 
  85.    21 
  86.    22 
  87.    23 
  88.    24 
  89.    25 
  90.    26 
  91.    27 
  92.    28 
  93.    29 
  94.    30 
  95.    31 
  96.    32 
  97.    33 
  98.    34 
  99.    35 
  100.    36 
  101.    37 
  102.    38 
  103.    39 
  104.    40 
  105.    41 
  106.    42 
  107.    43 
  108.    44 
  109.    45 
  110.    46 
  111.    47 
  112.    48 
  113.    49 
  114.    50 
  115.    51 
  116.    52 
  117.    53 
  118.    54 
  119.    55 
  120.    56 
  121.    57 
  122.    58 
  123.    59 
  124.    60 
  125.    61 
  126.    62 
  130.    1 
  131.    2 
  132.    3 
  133.    4 
  134.    5 
  135.    6 
  136.    7 
  137.    8 
  138.    9 
  139.    10 
  140.    11 
  141.    12 
  142.    13 
  143.    14 
  144.    15 
  145.    16 
  146.    17 
  147.    18 
  148.    19 
  149.    20 
  150.    21 
  151.    22 
  152.    23 
  153.    24 
  154.    25 
  155.    26 
  156.    27 
  157.    28 
  158.    29 
  159.    30 
  160.    31 
  161.    32 
  162.    33 
  163.    34 
  164.    35 
  165.    36 
  166.    37 
  167.    38 
  168.    39 
  169.    40 
  170.    41 
  171.    42 
  172.    43 
  173.    44 
  174.    45 
  175.    46 
  176.    47 
  177.    48 
  178.    49 
  179.    50 
  180.    51 
  181.    52 
  182.    53 
  183.    54 
  184.    55 
  185.    56 
  186.    57 
  187.    58 
  188.    59 
  189.    60 
  190.    61 
  191.    62

5、数据绑定

数据绑定很重要，那么多的新闻列表，不可能每个新闻都复制粘贴一下代码。况且小程序还限制在1MB大小。

我们把数据内容单独放在一个文件夹里，模拟从网络加载的情况

如图，在根目录新建一个data文件夹，里面新建一个posts-data.js文件
这里写图片描述

5.1、posts-data.js

在posts-data.js里定义一个local_database数组

  1. var local_database=[
  2.       {
  3.         date:"Nov 10 2016",
  4.         title:"文章标题1",
  5.         imgSrc:"/images/post/crab.png",
  6.         avatar:"/images/avatar/1.png",
  7.         content:"文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介",
  8.         reading:"92",
  9.         collection:"65",
  10.         view_img:"/images/icon/chat.png",
  11.         collect_img:"/images/icon/view.png",
  12.       },
  13.       {
  14.         date:"Nov 20 2016",
  15.         title:"文章标题2",
  16.         imgSrc:"/images/post/bl.png",
  17.         avatar:"/images/avatar/2.png",
  18.         content:"文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介",
  19.         reading:"88",
  20.         collection:"66",
  21.         view_img:"/images/icon/chat.png",
  22.         collect_img:"/images/icon/view.png",
  23.       },
  24.       {
  25.         date:"Nov 25 2016",
  26.         title:"文章标题3",
  27.         imgSrc:"/images/post/cat.png",
  28.         avatar:"/images/avatar/3.png",
  29.         content:"文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介",
  30.         reading:"123",
  31.         collection:"55",
  32.         view_img:"/images/icon/chat.png",
  33.         collect_img:"/images/icon/view.png",
  34.       }
  35.     ]
  39.    1 
  40.    2 
  41.    3 
  42.    4 
  43.    5 
  44.    6 
  45.    7 
  46.    8 
  47.    9 
  48.    10 
  49.    11 
  50.    12 
  51.    13 
  52.    14 
  53.    15 
  54.    16 
  55.    17 
  56.    18 
  57.    19 
  58.    20 
  59.    21 
  60.    22 
  61.    23 
  62.    24 
  63.    25 
  64.    26 
  65.    27 
  66.    28 
  67.    29 
  68.    30 
  69.    31 
  70.    32 
  71.    33 
  72.    34 
  73.    35 
  74.    36 
  78.    1 
  79.    2 
  80.    3 
  81.    4 
  82.    5 
  83.    6 
  84.    7 
  85.    8 
  86.    9 
  87.    10 
  88.    11 
  89.    12 
  90.    13 
  91.    14 
  92.    15 
  93.    16 
  94.    17 
  95.    18 
  96.    19 
  97.    20 
  98.    21 
  99.    22 
  100.    23 
  101.    24 
  102.    25 
  103.    26 
  104.    27 
  105.    28 
  106.    29 
  107.    30 
  108.    31 
  109.    32 
  110.    33 
  111.    34 
  112.    35 
  113.    36

别忘了在posts-data.js文件最后加上输出

  1. module.exports={
  2.         postList:local_database
  3.     }
  6.    1 
  7.    2 
  8.    3 
  12.    1 
  13.    2 
  14.    3

5.2、post.wxml使用数据绑定：

例如用户头像图片的路径，用双大括号括起来 里面和数组里定义的要相同，然后前面要加上item. 意思是绑定数组里定义的avatar，代码如下：

  1. <image class="post-author" src="{
  2.     {
  3.     item.avatar}}"></image>
  6.    1 
  10.    1

5.3、post.js

先把posts-data.js文件引入：

  1. var postsData=require('../../data/posts-data.js')
  4.    1 
  8.    1

然后在onLoad: 函数内设置Data的值

  1. onLoad:function(options){
  3.     // 生命周期函数--监听页面加载
  4.     this.setData({
  5.       posts_key:postsData.postList
  6.     })
  7.   },
  10.    1 
  11.    2 
  12.    3 
  13.    4 
  14.    5 
  15.    6 
  19.    1 
  20.    2 
  21.    3 
  22.    4 
  23.    5 
  24.    6

6、for循环

在wxml要循环的部分外面加上<block> </block>标签

  1. <block wx:for="{
  2.     {
  3.     posts_key}}" wx:for-item="item">
  4. <view class="post-container">
  5.       <view class="post-author-date">
  6.         <image class="post-author" src="{
  7.     {
  8.     item.avatar}}"></image>
  9.         <text class="post-date">{
  10.     {
  11.     item.date}}</text>
  12.       </view>
  13.       <text class="post-title">{
  14.     {
  15.     item.title}}</text>
  16.       <image class="post-image" src="{
  17.     {
  18.     item.imgSrc}}"></image>
  19.       <text class="post-content">{
  20.     {
  21.     item.content}}</text>
  22.       <view class="post-like">
  23.         <image class="post-like-image" src="{
  24.     {
  25.     item.view_img}}"></image>
  26.         <text class="post-like-font">{
  27.     {
  28.     item.reading}}</text>
  29.         <image class="post-like-image" src="{
  30.     {
  31.     item.collect_img}}"></image>
  32.         <text class="post-like-font">{
  33.     {
  34.     item.collection}}</text>
  35.       </view>
  36.     </view>
  37. </block>
  40.    1 
  41.    2 
  42.    3 
  43.    4 
  44.    5 
  45.    6 
  46.    7 
  47.    8 
  48.    9 
  49.    10 
  50.    11 
  51.    12 
  52.    13 
  53.    14 
  54.    15 
  55.    16 
  56.    17 
  60.    1 
  61.    2 
  62.    3 
  63.    4 
  64.    5 
  65.    6 
  66.    7 
  67.    8 
  68.    9 
  69.    10 
  70.    11 
  71.    12 
  72.    13 
  73.    14 
  74.    15 
  75.    16 
  76.    17

语法是：

wx:for=”{ {数组名}}”

7、源码下载

——>csdn免积分下载

发表评论

表情：
评论列表 （有 0 条评论，351人围观）

还没有评论，来说两句吧...

相关阅读

    相关 微信小程序WXML之列表渲染

    这一章节我们来学习一下我们在程序中另一个重要的语法结构循环结构，在java或C中是用for关键字的，在微信小程序中也是for关键字，但是不同的是语法结构有点不同，下面我们介绍一

    矫情吗；*矫情吗；*/ 0 赞/ 214 阅读

    相关 微信小程序之数据绑定

    微信小程序是通过什么方法来实现数据绑定的呢？答案是状态模式-单向数据流。 状态模式定义一个对象，改对象可以通过管理其状态的变化，从而实现应用程序做出相应的变化。

    男娘i男娘i/ 0 赞/ 357 阅读