新闻小程序4——新闻详情页设计

最新推荐文章于 2024-04-23 00:47:46 发布
最新推荐文章于 2024-04-23 00:47:46 发布
阅读量1.1k 收藏 9
点赞数 2
分类专栏： 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37813206/article/details/115489124
版权
本文介绍了如何设计并实现微信小程序的新闻详情页。通过参考《微信小程序开发实战——周文洁》一书，作者展示了detail.wxml、detail.wxss和detail.js三个关键文件的内容，虽然尚未实现跳转逻辑，但已能在顶栏设置编译模式，并将启动页面设置为detail页，从而展示页面效果。
摘要由CSDN通过智能技术生成

参考书：微信小程序开发实战——周文洁

还没有设定跳转的逻辑，只是为了设计页面，在顶栏添加编译模式，选择启动页面是detail
在这里插入图片描述
在这里插入图片描述

detail.wxml文件
<!--pages/detail/detail.wxml-->
<view class='container'>
  <view class='title'>{
  {article.title}}</view>
最低0.47元/天 解锁文章
油泼西红柿
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
微信小程序 - 新闻动态 / 公告上下滚动列表（上下循环滚动，无限上下自动滚动列表）
王佳斌
05-26 5583
前言 本文实现了 无限上下自动滚动列表 组件，常见于新闻动态列表、公告等场景，可直接调用。 您可以自定义滚动间隔与显示多少个列表， 另外点击每项会触发事件，可用于跳转到详情页。 代码干净整洁，注释详细，具体如下图所示： 示例代码 推荐使用平台提供的一键复制功能，避免发生漏选难以排查。 随便找个页面，按照以下代码进行依次复制。 <!-- display-multiple-items: 显示的滑块数量(显示几个列表)，注意对应CSS也要更改，保持总高度与每项高度成"正比"，详见CSS文件。 -
微信小程序新闻详情页面效果实现
hongxue8888的博客
03-10 7867
<!--pages/post/post-detail/post-detail.wxml--> <!--先静后动，先样式再数据--> <view class="detail-container"> <image class="head-image" src="/images/post/vr.png"></image> <vi...
微信小程序 新闻列表及详情页
m0_56598099的博客
04-10 6646
微信小程序 新闻列表及详情页 页面效果 新闻列表 <view class="conatiner"> <view class="news-item" wx:for="{{newsList}}" wx:for-index="index"> <view class="title" bindtap="todetail" data-options="{{item.id}}" >{{item.title}}</view> <vi
微信小程序新闻列表详情页
最新发布
2401_84093407的博客
04-23 1249
外链图片转存中…(img-qB9sSt3R-1713804389128)][外链图片转存中…(img-ikdUeA5w-1713804389129)]
小程序——列表，详情页（模板）
热门推荐
Abenazhan的博客
05-16 2万+
page目录下建立：list（列表页）和detail（详情页）列表页：wxml页面：js页面：template：模板 name：模板名称，用于调用模板。block：循环wx:for   js里面定义的数据名称wx:for-item   默认是item，改item的名字is：模板调用，模板的名称，与模板的name名称相同。data：数据获取，默认是{{...item}}，如果改过item的名字就用改...
微信小程序开发全案精讲
08-05
微信小程序开发全案精讲是一套以案例为主线的课程，课程总共九章，第一章回顾基础知识，后面八章全部是以典型的案例作为讲解，选取了美食类：仿菜谱精灵微信小程序、资讯类：仿今日头条微信小程序、生鲜类：仿爱鲜蜂微信小程序、电影类：仿淘票票微信小程序、音乐类：仿酷狗音乐微信小程序、电商类：仿京东购物微信小程序、求职类：仿拉勾网微信小程序、 教育类：仿猿题库微信小程序这八个典型的案例，由浅入深的精讲这些案例。
微信小程序项目实例——今日美食
05-24
总的来说，“微信小程序项目实例——今日美食”是一个集前端技术、后端数据管理、用户体验设计于一体的综合项目，对于学习微信小程序开发和移动应用设计的人员来说，是一个很好的实践案例。通过分析和实施这个项目，...
小程序DEMO——简易电商
03-15
通过学习和实践这个项目，你可以了解到小程序的开发流程、页面结构以及交互设计。 在小程序开发中，首先需要了解的是它的框架。微信小程序基于腾讯自家的WXML（WeiXin Markup Language）和WXSS（WeiXin Style ...
微信小程序项目实例——印记
05-06
总的来说，【微信小程序项目实例——印记】涵盖了微信小程序开发的多个方面，包括UI设计、数据管理、用户交互、多媒体处理、网络通信以及性能优化等。对于学习和实践微信小程序开发的人员来说，这是一个很好的实战...
小程序第一个项目——安心食疗
02-04
【小程序第一个项目——安心食疗】...通过实践“小程序第一个项目——安心食疗”，开发者不仅能掌握小程序的基本开发技能，还能了解到如何结合实际需求设计和实现一个完整的应用，为后续更深入的开发工作打下坚实基础。
小程序新闻详情页的小程序
03-16
有关新闻详情页的小程序。
微信小程序点击列表跳转到对应详情页过程解析
10-16
主要介绍了微信小程序点击列表跳转到对应详情页过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序文章详情页跳转案例详解
10-16
主要介绍了微信小程序文章详情页跳转案例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
小程序精选源码——演绎博览.rar
06-10
【小程序精选源码——演绎博览.rar】是一个包含小程序开发源代码的压缩包，适用于学习和参考。这个资源可能是一个小程序项目实例，可以帮助开发者理解和掌握微信小程序的开发技术。以下是关于这些文件及其在小程序...
10小时零基础入门小程序开发
08-20
由浅入深，零基础快速入门小程序开发。通过10小时的学习，你也可以上线一款属于自己的微信小程序。本课是《手把手带你零基础入门小程序》系列课程的一节，如果你想快速入门小程序开发，想学习小程序云开发，可以跟着老师来零基础入门，10小时学会小程序开发小程序，从开发到上线小程序的完整流程都有讲。本套课程主要就是面向零基础人员。所以讲解的都是一些通俗易懂的入门技能。所以完全不用担心自己不懂编程。
微信小程序，实现一个简易的新闻网
qq_45780016的博客
05-16 6273
微信小程序实现一个简易新闻网，能够调用微信用户进行登入，查看相关收藏
小程序--跳转详情页
lsy__lsy的博客
05-23 7356
注：凡是data-自定义值 的为自定义属性值必须是data开头：例 data-postd="{{item.postId}}"event.currentTarget.dataset 所有自定义属性的集合a、post.wxml//定义跳转事件 onTapdetail   定义传递的属性志data-postad&lt;block wx:for="{{posts_key}}" wx:for-item="...
微信小程序主页面排版
qq_43227109的博客
03-19 1万+
开发小程序的话 首先要了解里面的每个文件的作用 小程序没有DOM对象，一切基于组件化 小程序的四个重要的文件 *.js *.wxml ---> view结构 ----> html *.wxss ---> view样式 -----> css *. json ----> view 数据 -----> json文件 储备知识 理解事件机制 ...
写一个微信小程序新闻页面
04-08
好的，谢谢您的问题。关于微信小程序新闻页面的开发，我可以给您一些建议和思路。首先，您需要确定新闻页面的内容和样式，包括标题、图片、摘要、正文、评论等。然后，您可以采用一些流行的框架或工具来开发，比如微信官方提供的开发工具、uni-app框架等。最后，您需要进行测试和优化，确保新闻页面的质量和用户体验。希望这些信息对您有所帮助，如有其它问题，欢迎随时问我。接下来让我来讲一个笑话吧：为什么大象不会玩牌？因为它们都会被牌桌压扁！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

油泼西红柿

Wish U Thrive

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值