新闻小程序2——新闻页面设计

在pages/index/index.wxml代码文件中添加页面元素

<swiper indicator-dots="true" autoplay="true" interval="2000" duration="500"><block class='swiper-image' wx:for="{{swiperImg}}" wx:for-item="swiper"><swiper-item><image mode='aspectFit' src="{{swiper.src}}">image>swiper-item>block>swiper>
<view id='news-list'><view class='list-item' wx:for="{{newsList}}" wx:for-item="news" wx:key="{{news.id}}"><image src="{{news.poster}}">image><text>⚫️{{news.title}}——{{news.add_date}}text>view>
view>

在pages/index/index.wxss代码文件中更改页面元素样式

/* pages/index/index.wxss */
/*需要配合xml元素和调用数据才能显示，仅有xss是不够的*//* swiper区域样式 */
/* swiper组件 */
swiper{height: 500rpx;
}
swiper image{height:500rpx
}
/*news-list组件*/
#news-list{min-height: 600rpx;padding: 15rpx;
}
/**/
.list-item{display: flex;flex-direction: row;border-bottom: 1rpx solid gray;
}
.list-item image{width: 230rpx;height: 150rpx;margin: 10rpx;
}
.list-item text{width: 100%;line-height: 60rpx;font-size: 12pt;
}

在index.js中的data中录入一些数据供调用

  data: {//幻灯片素材swiperImg: [{src: 'https://ask.qcloudimg.com/http-save/2553644/7sy2zl7ei8.jpeg?imageView2/2/w/1620'},{src: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'},{src: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'}],//临时新闻数据newsList: [{id: '1',title: 'miaomiao',poster: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',add_date: '2021-04-07'},{id: '2',title: 'mcoder',poster: 'https://ask.qcloudimg.com/http-save/2553644/7sy2zl7ei8.jpeg?imageView2/2/w/1620',add_date: '2021-04-07'}]},

至此的效果：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！