微信小程序 新闻列表及详情页
页面效果
新闻列表
<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.jsPage({data: {newsList: [{id: 0,title: '农业农村部实施粮食稳产增产“五大行动”奋力夺取全年粮食丰收',author: '龙新',publishDate: '-03-10',image: '//04/10/7n2D81tvIfdxLab.jpg',detail: ['近日，我也不知道说什么想问下我想问下我想问下我想问下我想问下我我想下','wwwwwwww','ddddddddddddddd','wwwwwwwwwwwww']},{id: 1,title: '农业农村部实施粮食稳产增产“五大行动”奋力夺取全年粮食丰收',author: '龙新',publishDate: '-03-10',image: '',detail:[]},{id: 2,title: '农业农村部实施粮食稳产增产“五大行动”奋力夺取全年粮食丰收',author: '龙新',publishDate: '-03-10',image: '//04/10/7n2D81tvIfdxLab.jpg',detail: []},{id: 3,title: '农业农村部实施粮食稳产增产“五大行动”奋力夺取全年粮食丰收',author: '龙新',publishDate: '-03-10',image: '//04/10/7n2D81tvIfdxLab.jpg',detail: []},{id: 4,title: '农业农村部实施粮食稳产增产“五大行动”奋力夺取全年粮食丰收',author: '龙新',publishDate: '-03-10',image: '//04/10/7n2D81tvIfdxLab.jpg',detail: []},{id: 5,title: '农业农村部实施粮食稳产增产“五大行动”奋力夺取全年粮食丰收',author: '龙新',publishDate: '-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(){}})
对本文的首行缩进和换行如何同时处理存在 搞了很久 不行 就暂时用数组的方式，欢迎大佬们解答。
