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

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

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

detail.wxml文件

<!--pages/detail/detail.wxml-->
<view class='container'><view class='title'>{{article.title}}</view><view class='poster'><image src='{{article.poster}}' mode='widthFix'></image></view><view class='content'>{{article.content}}</view><view class='add_date'>时间：{{article.add_date}}</view>
</view>

detail.wxss文件

/* pages/detail/detail.wxss */
/*整体容器*/
.container{padding: 15rpx;text-align: center;
}
/*新闻标题*/
.title{font-size: 14pt;line-height: 80rpx;
}
/*新闻图片*/
.poster image{width: 100%;
}
/*新闻正文*/
.content{text-align: left;font-size: 12pt;line-height: 60rpx;
}
/*新闻日期*/
.add_date{font-size: 12pt;text-align: right;line-height: 30rpx;margin-right: 25rpx;margin-top: 20rpx;
}

detail.js文件

  data: {article: {id: '1',title: 'miaomiao',poster: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',add_date: '2021-04-07',content: ' 程序员不想头秃 '}},

效果：

新闻小程序4——新闻详情页设计相关推荐

新闻小程序3——个人中心页面设计
参考书:微信小程序开发实战--周文洁在my.wxml中添加元素  <view id='myLogin ...
小程序微信位置详情页打开小程序
为了让用户更便捷地使用小程序的打车服务,在位置消息详情页的菜单中,新增了打车小程序入口.打开聊天中的位置消息,点击详情页右下角绿色按钮,菜单中会展示符合条件的打车小程序,用户可以直接发起目的地为该位置 ...
axure 画小程序效果图_APP详情页如何用Axure画出来
详情页是App原型中比较复杂的页面类型,熟悉它的常用套路有助于快速画出. 之前的文章已经讲解了APP常见功能中的页面模板.下导航.上导航.列表页怎么画出来,请继续关注浪子教你画APP原型后续的其他功能 ...
微信小程序之书籍详情页
上期我们写了静态分类的普通界面了,现在我们需要写跳转进入书籍详细信息页的静态页面了. 如果你想设置顶部导航标题栏的话,可以在json里设置这样点进去的话就导航栏就会显示出书本详情的标题了. 好了,言 ...
小程序实现商品详情页的tap标签与页面滚动联动效果
实现原理:利用scroll-view标签,注意:scroll-into-view属性要想实现滚动需在scroll-view标签内部盒子里,即scroll-view大小可以等于屏幕的高,内容非屏幕滚动 ...
电商详情页设计小程序开发分享，支持微信转发，可用于增加微信转发，提高转化率
详情页设计小程序开发总结简介详情页设计小程序功能详情页设计源码介绍详情页设计小程序首页详情页开发台文件介绍详情页设计小程序总结详情页设计免费源码简介从电商出现后,详情页设计变得非 ...
android开源新闻小程序、3D翻转公告效果、小说检索、Kotlin开发TODO清单等源码...
Android精选源码开源新闻小程序源码分享 android动态壁纸.锁屏动画.来电秀等源码 android笔记App效果源码 Android实现3D版翻页公告效果 android小说搜索阅读源码 ...
微信小程序期末大作业，体育新闻小程序
新闻小程序一个简单的新闻小程序,时候初学者学习使用. 下载链接:https://download.csdn.net/download/weixin_43474701/85383035 点我下载资源
微信小程序编写新闻阅读列表
微信小程序编写新闻阅读列表本篇学习主要内容 Swiper 组件(轮播图) App.json 里的关于导航栏.标题的配置. Page 页面与应用程序的生命周期数据绑定(核心知识) 数据绑定的运算与逻 ...

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

detail.wxml文件

detail.wxss文件

detail.js文件

新闻小程序4——新闻详情页设计相关推荐

最新文章

热门文章