微信小程序开发（5）-新闻页之滚动制作（scroll-view)组件的使用

2024-11-27 来源：个人技术集锦

如图，绿色边框框起来的部分为滑动新闻部分，其主要使用了scroll-view组件

四步

（1）newspage.js中定义数据

news: [{title:'这个夏天出游',imgUrl:'/images/01.png'},
{title:'组团去旅游',imgUrl:'/images/02.png'},
{title:'旅游去',imgUrl:'/images/03.png'},
{title: '这个夏天出游', imgUrl: '/images/01.png' },
{ title: '组团去旅游', imgUrl: '/images/02.png' },
{ title: '旅游去', imgUrl: '/images/03.png' }
],

（2）newspage.wxml显示

<scroll-view scroll-x="true" style="width:100%;height:110px;" bindscroll="EventHandle">
<view class="newsPic">
<block wx:for="{{news}}"> 注意：循环要写在block中
<view class="news">
<view class="picList">
<image src="{{item.imgUrl}}" style="height:70px;width:80px;"></image>
</view>
<view class="newsTitle">{{item.title}}</view>
</view>
</block>
</view>

</scroll-view>

（3）newspage.wxss中定义样式

（4）newspage.js中定义事件处理函数

显示全文

全部栏目

微信小程序开发（5）-新闻页之滚动制作（scroll-view)组件的使用