Uni-App 实现资讯滚动
2021-10-20 11:05
525 查看
项目需要实现资讯的滚动,使用了Swiper组件,实现了首页头部的资讯滚动,简单地做下笔记
效果
实现说明
主要是使用了Swiper可以自动滚动的特性来实现,左边是一个图片,右边则是Swpier,且姜Swpier的滚动方向设置为垂直,然后就是样式的调整
对了,我是从接口中请求到的一个列表数据,各位看代码的时候记得调整一下
代码
<template> <view> <view class="u-flex content"> <u-image @click="gotoList" class="icon" width="80" height="80" src="https://img2020.cnblogs.com/blog/1210268/202110/1210268-20211018193858671-1201041615.png"> </u-image> <swiper class="flex-1" :autoplay="true" :interval="2000" :circular="true" style="height: 90rpx;padding: 10rpx;" :duration="1000" :vertical="true"> <swiper-item v-for="(item,i) in noticeList" :key="i"> <view @click="toNoticeDetail(item.noticeId)"> <view class="u-line-1 u-m-b-10 fontBlack"> {{item.noticeTitle}} </view> <view class="fontGrey u-line-1" style="width: 100%;"> 发布时间:{{item.issuedTime}} 来源:{{item.issuedBy}} </view> </view> </swiper-item> </swiper> </view> </view> </template> <script> export default { data() { return { noticeList: [], pageSize: 3, pageNum: 1, total: null } }, mounted() { this.getNoticeList() }, methods: { gotoList() { uni.navigateTo({ url: "/pagesA/notice_list/notice_list" }) }, getNoticeList() { let url = "/dev-api/WechatTzggApi/list" let param = { pageSize: this.pageSize, pageNum: this.pageNum, issuedType: 1, status: 0 } let that = this this.$http.get(url, param).then(res => { uni.hideLoading() if (res.code == 200) { let rows = res.rows rows.forEach(item => { if (item.issuedTime != null) { let index = item.issuedTime.indexOf(" ") if (index != -1) { item.issuedTime = item.issuedTime.substring(0, index) } } }) that.noticeList.push(...rows) } console.log("通知公告列表数据...", res); }).catch(err => { uni.hideLoading() console.log(err); }) }, toNoticeDetail(id) { uni.navigateTo({ url: "/pagesA/notice_detail/notice_detail?id=" + id }) } } } </script> <style lang="scss" scoped> .content { padding: 20rpx; // box-shadow: 0px 3rpx 15rpx rgba(0, 0, 0, 0.15); background-color: $white; margin: 20rpx; border-radius: 10rpx; display: flex; } .icon { padding: 10rpx; } .fontGrey { color: gray; font-size: 28rpx; } .fontBlack { font-size: 30rpx; color: $black; } </style>
相关文章推荐
- uniApp / 小程序实现一个view滚动到一定高度置顶显示
- 移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
- 基于uni-app实现滚动上拉的多列复选列表
- uniapp里面直接使用scroll-view实现不超出屏幕的横向滚动(超级好用!!!)
- 使用uniapp如何实现锚点定位和滚动监听功能
- 移动端ionic App 资讯上下循环滚动的实现
- 【uni-app 实现左侧点击右侧滚动,仿美团菜单滚动】
- 教程:dedecms图文资讯图片实现循环滚动
- uni-app下拉刷新、上拉页面加载数据,实现分页效果
- uni-app实现微信小程序云开发
- uni-app实现单选、多选改变样式
- uni-app 全局变量的几种实现方式
- uni-app使用腾讯地图位置服务的微信小程序JavaScript SDK实现地图定位、地点查找、路线规划等功能
- uni-app实现上传多张照片
- uniapp实现上拉刷新,下拉加载
- Uniapp使用GoEasy实现websocket实时通讯
- apicloud app 滚动导航菜单实现
- uniapp中用view实现横向条形图
- uniapp实现音视频通讯
- uniapp实现时间格式化,显示几分钟之前