【微信小程序】列表渲染wx:for

这篇具有很好参考价值的文章主要介绍了【微信小程序】列表渲染wx:for。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【微信小程序】列表渲染wx:for

🏆今日学习目标:第十二期——列表渲染wx:for
😃创作者:颜颜yan_
✨个人主页:颜颜yan_的个人主页
⏰预计时间:20分钟
🎉专栏系列:我的第一个微信小程序



前言

哈喽大家好,本期是微信小程序专栏第十二期,本期我们将学习列表渲染wx:for。
注意:每期内容是连载呢,建议大家可以看看往期内容,更好理解噢~


效果图

【微信小程序】列表渲染wx:for
【微信小程序】列表渲染wx:for

< block>< /block>标签

< block>标签没有实质意义,仅仅是一个包装,不会在页面内被渲染,在block标签中包裹的元素将被重复渲染。

在block标签上,放置了一个wx:for的属性,它的值为{{postList}}。wx:for将绑定一个数组,也就是post.js中的postList数组,它对应post.js文件中的setData数组数据。

wx:for-item指定数组当前元素的变量名,如下,我们将元素的变量名指定为item。

wx:for-index指定当前元素在数组中序号的变量名,我们命名为idx。
【微信小程序】列表渲染wx:for
如果将wx:for-item="item"属性去掉,文章列表依然可以正常显示。
此时,不定义item,但是{{}}内依然有item,这是因为如果不定义数组子元素的变量名,小程序默认子元素的变量名就是item。也可以将它替换为其他的变量名,如果更改了子元素的变量名,那么{{}}中对应的也要进行更改。

post.js

将文章的数据提取到post.js中,组成一个数组。

 /**
     * 生命周期函数--监听页面加载
     * option为页面跳转所带来的参数
     */
    onLoad:function(options) {
        var postList = [{
            object:{
                date:"Nov 9 2022",
            },
            title:"那个不为人知的故事",
            postImg:"/images/post/unknow-story.jpg",
            avatar:"/images/avatar/avatar-5.png",
            content:"超人气作者Twentine(无量渡口)经典之作,直击心底深处的柔软。这是杨昭和陈铭生的故事,这是卧底缉毒警察的故事。 你始终不曾离去,你永远在我心底。",
            readingNum:10989,
            collectionNum:{
                array:[1867]
            },
            commentNum:999
        },
        {
            object:{
                date:"Nov 10 2022",
            },
            title:"边城",
            postImg:"/images/post/biancheng.jpg",
            avatar:"/images/avatar/avatar-2.png",
            content:"沈从文代表作之一,重现湘西世界的诗意与纯净,书写人情美、人事美、人性美",
            readingNum:9999,
            collectionNum:{
                array:[8766]
            },
            commentNum:886
        },
        {
            object:{
                date:"Nov 11 2022",
            },
            title:"活着",
            postImg:"/images/post/alive.jpg",
            avatar:"/images/avatar/avatar-3.png",
            content:"《活着》讲述了人如何去承受巨大的苦难;讲述了眼泪的宽广和丰富;讲述了绝望的不存在;讲述了人是为了活着本身而活着的,而不是为了活着之外的任何事物而活着。",
            readingNum:1234,
            collectionNum:{
                array:[5676]
            },
            commentNum:890
        },
        {
            object:{
                date:"Nov 12 2022",
            },
            title:"哈利波特百科全书",
            postImg:"/images/post/harry.jpg",
            avatar:"/images/avatar/avatar-4.png",
            content:"手里没有哈利波特百科全书 ,怎么能称得上真正的哈迷!涵盖哈利·波特全系列内容,配全新精美素描插图、哈利波特魔法世界历史年表。",
            readingNum:789,
            collectionNum:{
                array:[906]
            },
            commentNum:345
        },
        {
            object:{
                date:"Nov 19 2022",
            },
            title:"三体:全三册 刘慈欣代表作",
            postImg:"/images/post/santi.jpg",
            avatar:"/images/avatar/avatar-5.png",
            content:"《三体》第73届世界科幻雨果奖获奖作品,银河奖特别奖,《三体3》轨迹奖长篇科幻小说!2017年世界雨果奖提名作品。",
            readingNum:99,
            collectionNum:{
                array:[8766]
            },
            commentNum:89
        }
    ]
        this.setData({
            postList: postList
        })
    },

post.wxml

1、使用< block>< /block>标签将文章列表部分包裹起来
2、添加wx:for实现数据绑定,wx:for-item设置子元素变量名。

<!-- 轮播图 -->
<view>
    <swiper indicator-dots="true" autoplay="true" interval="3000" vertical="{{false}}" circular="true">
        <swiper-item>
            <image src="/images/post/post-1@text.jpg"></image>
        </swiper-item>
        <swiper-item>
            <image src="/images/post/post-2@text.jpg"></image>
        </swiper-item>
        <swiper-item>
            <image src="/images/post/post-3@text.jpg"></image>
        </swiper-item>
    </swiper>

    <!-- 文章列表 -->
    <block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx">
        <!-- view组件通常被用来当作容器或者是区域分隔 -->
        <view class="post-container">
            <view class="post-author-date">
                <image src="{{item.avatar}}"></image>
                <text>{{item.object.date}}</text>
            </view>
            <text class="post-title">{{item.title}}</text>
            <image class="post-image" src="{{item.postImg}}" mode="aspectFit"></image>
            <text class="post-content">{{item.content}}</text>
            <!-- 收藏 浏览 评价-->
            <view class="post-like">
                <image src="/images/icon/wx_app_collect.png"></image>
                <text>{{item.readingNum}}</text>
                <image src="/images/icon/wx_app_view.png"></image>
                <text>{{item.collectionNum.array[0]}}</text>
                <image src="/images/icon/wx_app_message.png"></image>
                <text>{{item.commentNum}}</text>
            </view>
        </view>
    </block>
</view>

post.json

这里主要是配置post页面的导航栏背景色。我们在post.json中输入 "navigationBarBackgroundColor": "#145282"就可以更改导航栏的颜色啦~

全局配置是在app.json中,单个页面的配置在页面的json文件中配置。

页面的json文件和app.json文件配置的区别

  • 页面的json文件只能够配置和window相关的属性,app.json除了可以配置window外还可以配置pages、tabBar等选项。
  • 页面的json配置只需要加上window对象,就可以直接编写window下面的配置项。
{
    "usingComponents": {},
    "navigationBarBackgroundColor": "#145282"
}

总结

以上就是今天的学习内容啦~
如果有兴趣的话可以订阅专栏,持续更新呢~
咱们下期再见~
【微信小程序】列表渲染wx:for文章来源地址https://www.toymoban.com/news/detail-479097.html

到了这里,关于【微信小程序】列表渲染wx:for的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年02月05日
    浏览(45)
  • 微信小程序的条件判断wx:if、wx:elif以及for循环wx:for

    微信小程序中的条件判断与vue的v-if、v-else语法相似,其语法格式为: 直接实战: 官方文档是这么定义的: **重点1:默认数组当前项的变量名为:item;默认数组当前项的下标变量名为index; **重点2:如果不想使用默认的名:按照以下操作自定义变量名 本人习惯使用默认,实

    2024年02月14日
    浏览(47)
  • 微信小程序wx:for 的使用以及wx:key绑定

    wx:for基本使用 wx:for-item和wx:for-index重新命名item和index wx:key两种绑定方式以及注意事项 wx:for基本使用 业务层数据 视图层 wx:for遍历时候每一项名称为 item 每一项索引名称为 index wx:for-item和wx:for-index实现item和index重命名 wx:for-item=\\\"str\\\" 将原来名称 item 修改成 str wx:for-index=\\\"i 将原来

    2024年02月11日
    浏览(79)
  • 微信小程序------WXML模板语法之条件渲染和列表渲染

    目录 前言 一、条件渲染 1.wx:if 2. 结合 使用 wx:if 3. hidden 4. wx:if 与 hidden 的对比 二、列表渲染 1. wx:for 2. 手动指定索引和当前项的变量名* 3. wx:key 的使用         上一期我们讲解wxml模版语法中的数据绑定和事件绑定(上一期链接:微信小程序-----WXML模板语法之数据绑定与事件

    2024年01月16日
    浏览(59)
  • 微信小程序如何循环控制一行显示几个wx:for

    正如上图所显示的一样,我们改如何控制一行显示几个图形呢? 首先第一种方法,数量少的可以自己一行一行的写,但是当数据很多的时候呢? 这时候就需要我们区使用循环进行代码的编写。废话不多数,直接写代码。 .demo-item{ width: 40%; } .demo-item .screen-data{ padding: 10rpx; te

    2024年02月09日
    浏览(51)
  • 【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式

    🐚作者简介:苏凉(专注于网络爬虫,数据分析,正在学习前端的路上) 🐳博客主页:苏凉.py的博客 🌐系列专栏:小程序开发基础教程 👑名言警句:海阔凭鱼跃,天高任鸟飞。 📰要是觉得博主文章写的不错的话,还望大家三连支持一下呀!!! 👉关注✨点赞👍收藏📂

    2024年01月16日
    浏览(70)
  • 微信小程序和 Vue 中的遍历循环和列表渲染有一些区别。

    在微信小程序中,我们可以使用 wx:for 指令来进行遍历循环,例如: 这里的 items 是一个数组,wx:for 指令会遍历这个数组,并将数组中的每个元素赋值给 item 变量,然后在模板中使用 {{item}} 来显示每个元素的值。wx:key 属性用于指定每个元素的唯一标识符,以便在更新列表时能

    2024年02月09日
    浏览(39)
  • 微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染

    关于微信小程序知识点一共做了六个博客,涵盖大部分内容,有想学习的可以按照以下顺序查看 1.微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类) 2.微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染 3.微信小程序wxss相关介绍、全局配置和tabbar知识

    2024年02月10日
    浏览(63)
  • 微信小程序:uni-app列表数据渲染子组件修改数据sync/v-model无效的问题

    有如下一个列表,将数据循环传递给子组件,实现业务解耦,组件拆分 Vue的正常逻辑是,父组件和子组件的数据传递的是一个对象,属于引用传递,可以直接在子组件中修改数据,父组件中也会变化,它们操作的是同一个数据。 uni-app子组件中修改 H5正常,转为微信小程序后

    2024年02月10日
    浏览(60)
  • 微信小程序开发学习笔记——3.4for循环列表渲染的用法

    跟着b站up主“咸虾米_”学习微信小程序开发中,把学习记录存到这方便后续查找。 课程连接:https://www.bilibili.com/video/BV19G4y1K74d?p=18vd_source=9b149469177ab5fdc47515e14cf3cf74 https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html data.js文件的data部分:  data.wxml文件中添加如下代码:

    2024年02月22日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包