微信小程序新闻列表及详情页

页面效果
新闻列表

<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><view class="author-info"><text class="author-name">作者：{{item.author}} </text><text class="author-date">发表于 {{item.publishDate}}</text></view><view style="border-bottom:1rpx solid #707070;width:100%"></view></view>
</view>

/* pages/news/news_list/news_list.wxss */
.news-item {margin: 30rpx;
}
.title {font-size: 40rpx;font-weight: bold;letter-spacing: 2px;color: #313131;
}.author-info {margin:20rpx 0;text-align: right;color: #707070;font-size: small;
}

// pages/news/news_list/news_list.js
Page({data: {newsList: [{id: 0,title: '农业农村部实施粮食稳产增产“五大行动”奋力夺取全年粮食丰收',author: '龙新',publishDate: '2021-03-10',image: 'https://i.loli.net/2021/04/10/7n2D81tvIfdxLab.jpg',detail: ['近日，我也不知道说什么想问下我想问下我想问下我想问下我想问下我我想下','wwwwwwww','ddddddddddddddd','wwwwwwwwwwwww']},{id: 1,title: '农业农村部实施粮食稳产增产“五大行动”奋力夺取全年粮食丰收',author: '龙新',publishDate: '2021-03-10',image: '',detail:[]},{id: 2,title: '农业农村部实施粮食稳产增产“五大行动”奋力夺取全年粮食丰收',author: '龙新',publishDate: '2021-03-10',image: 'https://i.loli.net/2021/04/10/7n2D81tvIfdxLab.jpg',detail: []},{id: 3,title: '农业农村部实施粮食稳产增产“五大行动”奋力夺取全年粮食丰收',author: '龙新',publishDate: '2021-03-10',image: 'https://i.loli.net/2021/04/10/7n2D81tvIfdxLab.jpg',detail: []},{id: 4,title: '农业农村部实施粮食稳产增产“五大行动”奋力夺取全年粮食丰收',author: '龙新',publishDate: '2021-03-10',image: 'https://i.loli.net/2021/04/10/7n2D81tvIfdxLab.jpg',detail: []},{id: 5,title: '农业农村部实施粮食稳产增产“五大行动”奋力夺取全年粮食丰收',author: '龙新',publishDate: '2021-03-10',image: []}]},onLoad: function (options) {},todetail: function (e) {var that=this;const data= that.data.newsList[e.target.dataset.options];const target = JSON.stringify(data);console.log(target);wx.navigateTo({url: '../news_details/news_details?info=' + target})}
})

新闻详情页

<view class="container"><image class="news-image" src="{{info.image}}"></image><view class="fix"><text class="title">{{info.title}}</text><view class="info"><view class="author-info"><text class="author-name">作者：{{info.author}} </text><text class="author-date">发表于 {{info.publishDate}} </text></view><view class="operation"><image wx:if="{{flag}}" bindtap="changeCollect" src="../../../images/icons/collect_no.png"></image><image wx:else bindtap="changeCollect" src="../../../images/icons/collect_yes.png"></image><label for="btnId"><image bindtap="share" src="../../../images/icons/share.png"></image></label></view></view> </view><button open-type="share" id="btnId" style="display:none"></button><view style="border-bottom:1rpx solid #707070;width:100%"></view><view wx:for="{{info.detail}}"><view decode=true" class="detail" user-select="true">{{item}}</view>
</view>
</view>

/* pages/news/news_details/news_details.wxss */
.container{padding:0;
}
.news-image {width: 100%;height: 460rpx;
}
.fix{margin:30rpx 30rpx 0rpx 30rpx;
}
.title {font-size: 40rpx;font-weight: bold;letter-spacing: 2px;color: #313131;
}.info{display: flex;width: 100%;align-items: center;justify-content:space-between;color: #707070;font-size: small;
}
.operation Image {width: 90rpx;height: 90rpx;
}.share-img {margin-left: 30rpx;
}.detail {margin:16rpx;line-height: 44rpx;letter-spacing: 2px;font-size: 32rpx;text-align: justify;line-height:2;text-indent:2em;
}

// pages/news/news_details/news_details.jsPage({data: {flag: false,info:{}},onLoad: function (options) {var that=this;var info= JSON.parse(options.info);console.log(info.detail);that.setData({info:info})console.log(this.data.info);},changeCollect: function () {this.setData({flag: !this.data.flag})if (this.data.flag) {wx.showToast({title: '已收藏',icon: 'none',duration: 2000})} else {wx.showToast({title: '已取消收藏',icon: 'none',duration: 2000})}},onUnload: function () {wx.reLaunch({url: '../news/news'})},onShareAppMessage: function () {return {}},onShareTimeline: function(res){return {}},onPageScroll:function(){}
})

对本文的首行缩进和换行如何同时处理存在搞了很久不行就暂时用数组的方式，欢迎大佬们解答。

微信小程序新闻列表及详情页相关推荐

微信小程序新闻列表详情页
微信小程序新闻列表详情页不忘初心,方得始终.初心易得,始终难守首先创建 post-detail 文件夹,创建四种文件. 修改 post.wxml 文件代码,给每个新闻块添加一个点击事件.并且我们要 ...
微信小程序新闻列表功能（读取文件、template）
微信小程序新闻列表功能(读取文件.template) 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件,和 post.js 文件中,某些键值对键 ...
微信小程序实战篇-商品详情页（二）
今天要讲解商品详情页中sku的弹出选着框,这个涉及css动画样式,css动画是新的知识点,我们之前并没有接触过,请大家做好笔记,我们要做的效果是酱紫的~ 这个布局难点是需要绘制一个阴影背景.弹出的动画 ...
微信小程序商城开发-商品详情页跳转购物车
项目场景: 微信小程序商城开发中商品详情页中购物车页面的跳转(仅限于tabbar页面的跳转) 问题描述点击商品详情页中的购物车图标跳转不到tabbar及导航栏中的购物车页面,总是报错原因分析: 微 ...
微信小程序开发--首页及详情页开发
一.常用组件在之前的封装请求数据的模块中请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.轮播图数据的请求pages/index/index.js data: {bannerlist:[] / ...
微信小程序实战篇-商品详情页（一）
哈喽,大家好,今天要进入新篇章啦,商品详情页,这个可是个大模块,要分好几次才能讲解清楚,现在我们先进行第一讲,老规矩,先上效果图有木有很酷炫啊,下面由代码君教你如何实现. 详情页布局看效果图,可以 ...
微信小程序C语言通讯录,微信小程序のwxml列表渲染
列表渲染存在的意义以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. {{index+1}}:{{item.name}} Page({ data: { message ...
新闻列表页flex_微信小程序新闻网站列表页
javascript 技术文章开发微信小程序新闻网站列表页在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属 ...
微信小程序多级列表绑定
微信小程序多级列表绑定 1.wxml <view class="weui-form-preview margin-bottom" wx:key="" wx ...

微信小程序新闻列表及详情页

微信小程序新闻列表及详情页

微信小程序新闻列表及详情页相关推荐

最新文章

热门文章

微信小程序 新闻列表及详情页

微信小程序 新闻列表及详情页

微信小程序 新闻列表及详情页相关推荐

最新文章

热门文章

微信小程序新闻列表及详情页

微信小程序新闻列表及详情页

微信小程序新闻列表及详情页相关推荐