| | |
| | | <template> |
| | | <view class="advisory-big "> |
| | | <!-- 自定义顶部导航栏 --> |
| | | <view class="uni-nav-bar-info" :style="{marginTop:navbarTopHeight}"> |
| | | <!-- <view class="uni-nav-bar-info" :style="{marginTop:navbarTopHeight}"> |
| | | <view class="title" @click="goTabDetail(index)" v-for="(item,index) in titleList" |
| | | :style="titleNum==index? 'color:#000000':'color:#808080'">{{item}}</view> |
| | | </view> |
| | | </view> --> |
| | | |
| | | <view class="article-tab"> |
| | | <view :class="{'article-tab-title':true,'cccc':index == articleTabNum}" @click="goArticleTab(index)" v-for="(item,index) in articleTabArr" |
| | |
| | | <image :src="i.url"></image> |
| | | </view> |
| | | </view> |
| | | <u-loadmore :status="status" /> |
| | | </view> |
| | | |
| | | <!-- 底部导航条 --> |
| | |
| | | pathUrl: "http://s16s652780.51mypc.cn/api", |
| | | page: 1, |
| | | pagesize: 10, |
| | | status: 'loadmore', |
| | | // loadStatus:'loading', //加载样式:more-加载前样式,loading-加载中样式,nomore-没有数据样式 |
| | | isLoadMore: false, //是否加载中 |
| | | isFlash: false, //是否刷新 |
| | |
| | | mounted() { |
| | | // this.getArtcilePageList(); |
| | | }, |
| | | //上拉加载更多 |
| | | // onReachBottom() { //上拉触底函数 |
| | | // console.log("上拉了") |
| | | // if (!this.isLoadMore) { //此处判断,上锁,防止重复请求 |
| | | // // this.isLoadMore=true |
| | | // this.page += 1 |
| | | // this.getArtcilePageList(2) |
| | | // } |
| | | // }, |
| | | // //下拉刷新 |
| | | // onPullDownRefresh() { |
| | | // // console.log("下拉了!...."); |
| | | // if (!this.isFlash) { //此处判断,上锁,防止重复请求 |
| | | // // this.isFlash=true; |
| | | // this.page = 1; |
| | | // this.getArtcilePageList(1); |
| | | // uni.stopPullDownRefresh(); |
| | | // } |
| | | // }, |
| | | onLoad() { |
| | | this.getArtcilePageList(1); |
| | | this.getArtcilePageList(); |
| | | uni.stopPullDownRefresh(); |
| | | }, |
| | | //上拉加载更多 |
| | | onReachBottom() { |
| | | // |
| | | if (this.status=='nomore') return; |
| | | this.page = ++this.page; |
| | | setTimeout(() => { |
| | | this.getArtcilePageList(); |
| | | }, 2000); |
| | | }, |
| | | methods: { |
| | | goArticleTab(index) { |
| | |
| | | }, |
| | | //去跳转详情页面 |
| | | goDetail(e) { |
| | | |
| | | //内容传值容易报错,所以直传id,然后调用接口去查询 |
| | | // let detail = { |
| | | // title: e.title, |
| | | // content: e.content, |
| | | // id: e.id, |
| | | // createTime: e.createTime, |
| | | // sourceName: e.sourceName, |
| | | // imgUrl: e.url, |
| | | // videoUrl:e.videoUrl |
| | | // }; |
| | | |
| | | let detail = { |
| | | id: e.id |
| | | }; |
| | |
| | | getArtcilePageList(tab) { |
| | | var that = this; |
| | | uni.request({ |
| | | url: that.pathUrl + '/article/article/page', |
| | | url: this.$store.state.piAPI + '/article/article/page', |
| | | method: 'GET', |
| | | data: { |
| | | current: this.page, |
| | |
| | | success: (res) => { |
| | | if (res.data.code == 200) { |
| | | if (res.data.data.records) { |
| | | if (tab == 1) { |
| | | //如果总数小于pageSize,不做其他操作 |
| | | if (res.data.data.total < this.pagesize) { |
| | | that.data = res.data.data.records; |
| | | } else { |
| | | //如果总数小于pageSize,不做其他操作 |
| | | if (res.data.data.total < this.pagesize) { |
| | | that.data = res.data.data.records; |
| | | if (res.data.data.records.length < this.pagesize) { |
| | | //如果数量小于分页数量,则为最后一页 |
| | | this.status = 'nomore' |
| | | } else { |
| | | if (res.data.data.records.length < this.pagesize) { |
| | | //如果数量小于分页数量,则为最后一页 |
| | | // this.isLoadMore=true; |
| | | // this.loadStatus='nomore'; |
| | | } else { |
| | | // this.isLoadMore=false |
| | | } |
| | | res.data.data.records.forEach((item) => { |
| | | that.data.push(item); |
| | | }) |
| | | //否则继续加载更多数据 |
| | | this.status = 'loading'; |
| | | } |
| | | res.data.data.records.forEach((item) => { |
| | | that.data.push(item); |
| | | }) |
| | | } |
| | | } else { |
| | | // this.isLoadMore=true; |
| | | // this.loadStatus='nomore'; |
| | | } |
| | | uni.stopPullDownRefresh(); |
| | | } |
| | |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | page{ |
| | | width: 100%; |
| | | height: 100%; |
| | | background-color: #f7f7f7; |
| | | } |
| | | </style> |
| | | |
| | | <style lang="scss" scoped> |
| | | .advisory-big { |
| | | width: 100%; |
| | | height: 70%; |
| | | height: 100%; |
| | | background-color: #f7f7f7; |
| | | |
| | | .uni-nav-bar-info { |
| | | display: flex; |
| | |
| | | |
| | | |
| | | .article-tab { |
| | | // background-color: #007AFF; |
| | | background-color: #fff; |
| | | width: 100%; |
| | | height: 2rem; |
| | | height: 2.5rem; |
| | | border-bottom: 2px solid #D7D7D7; |
| | | z-index: 999; |
| | | position: fixed; |
| | | |
| | | .article-tab-title { |
| | | // text-align: center; |
| | | width: 14%; |
| | | float: left; |
| | | margin-left: 1rem; |
| | | margin-top: 0.5rem; |
| | | // border-bottom: 4px solid #000000; |
| | | } |
| | | |
| | | image { |
| | | margin-top: 0.35rem; |
| | | width: 1.5rem; |
| | | height: 1.5rem; |
| | | } |
| | | } |
| | | |
| | | .article-content{ |
| | | margin-top: 1rem; |
| | | margin-top: 3.5rem; |
| | | width: 100%; |
| | | // background-color: #00FF00; |
| | | |
| | | .advisory-model { |
| | | width: 100%; |
| | | width: 94%; |
| | | margin: 0 auto; |
| | | height: 6rem; |
| | | // background-color: #00FF00; |
| | | background-color: #FFF; |
| | | border-radius: 8px; |
| | | margin-top: 0.5rem; |
| | | |
| | | |
| | | .advisory-left { |
| | | width: 61%; |
| | | width: 64%; |
| | | height: 80%; |
| | | float: left; |
| | | position: relative; |
| | | // background-color: #00FFFF; |
| | | position: relative; |
| | | left: 4%; |
| | | left: 3%; |
| | | top: 10%; |
| | | |
| | | |
| | |
| | | |
| | | .advisory-right { |
| | | // background-color: #222222; |
| | | width: 32%; |
| | | width: 33%; |
| | | height: 80%; |
| | | left: 63%; |
| | | left: 65%; |
| | | position: relative; |
| | | top: 10%; |
| | | |
| | |
| | | width: 30px; |
| | | display: block; |
| | | height: 3.5px; |
| | | background-color: #000; |
| | | background-color: #0BB9C8; |
| | | } |
| | | |
| | | |
| | |
| | | display: flex; |
| | | flex-direction: row; |
| | | position: relative; |
| | | top: 0.35rem; |
| | | top: 2.85rem; |
| | | |
| | | .search-ico-wapper{ |
| | | background-color: #F1F1F1; |