123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206 |
- <template>
- <view>
- <view class="searchType" style="background: #fff;">
- <view class="input-view">
- <uni-icon type="search" size="22" color="#666666" />
- <input disabled="true" confirm-type="search" class="input" type="text" placeholder="搜索文章" @click="confirm" />
- </view>
- </view>
- <view>
- <van-tabs :active="active" @change="onChange">
- <van-tab v-for="(item,index) in typelist" :key="index" :name="index" :title="item.ac_name"></van-tab>
- </van-tabs>
- </view>
- <scroll-view class="floor-list"
- :scroll-top="scrollTop" style="height: 90vh;" scroll-y="true" @scroll="scroll" @scrolltoupper="upper" @scrolltolower="lower"
- :refresher-enabled="false">
- <view v-for="(item,indedx) in acrelist" :key="indedx" @click="goIndex(item)">
- <view class="hotelList">
- <view class="hotleLeft">
- <image style="width: 214upx;height: 152upx;" :src=" pictureUrl + '/' + item.article_thumb"/>
- </view>
- <view class="hotelright">
- <view style="font-size: 28upx;color: #303133;">{{item.article_title}}</view>
- <view style="color: #999;">
- {{item.article_time}}
- </view>
- </view>
- </view>
- </view>
- </scroll-view>
- <Gobacktop @getop="getop" v-if="isTop" />
- </view>
- </template>
- <script>
- import uniIcon from '@/component/uni-icon/uni-icon.vue'
- import Gobacktop from '@/component/Gobacktop.vue'
- export default {
- components: {
- uniIcon,
- Gobacktop
- },
- data() {
- return {
- pictureUrl: this.pictureUrl,
- page: 1,
- page_size: 10,
- ac_id:'',
- keyword:'',
- active: 0,
- scrollTop: 0,
- old: {
- scrollTop: 0
- },
- isTop: false,
- typelist:[],
- acrelist:[],
- ispull: true
- }
- },
- onLoad() {
- this.getype(); // 获取文章分类
- this.getlist(); // 获取文章列表
- },
- methods: {
- getop() {
- this.scrollTop = this.old.scrollTop
- this.$nextTick(function(){
- this.scrollTop=0;
- });
- this.isTop = false;
- },
- goIndex(items) {
- let article_id = items.article_id;
- let ac_id = items.ac_id;
- let name = '';
- this.typelist.forEach((item, index) => {
- if(item.ac_id == ac_id) {
- name = item.ac_name;
- }
- })
- uni.navigateTo({
- url: `/pages/myone/onedetail?id=${article_id}&name=${name}`
- });
- },
- getype() {
- this.request({
- url: '/v1/entry/news_cate',
- method:'POST',
- success: (res) => {
- let array = [{ac_name:'全部'}];
- this.typelist = array.concat(res.data.data);
- }
- })
- },
- getlist() {
- this.request({
- url: '/v1/entry/news',
- method:'POST',
- data: {
- page: this.page,
- page_size: this.page_size,
- ac_id: this.ac_id,
- keyword: this.keyword
- },
- success: (res) => {
- let { data } = res.data;
- if(data.total_page == data.current_page) {
- this.ispull = false;
- }
- this.acrelist = this.acrelist.concat(data.new_list);
- }
- })
- },
-
- confirm() {
- uni.navigateTo({
- url: './ariclle'
- })
- },
- onChange(event) {
- this.active = event.detail.name;
- if( event.detail.name == 0) {
- this.ac_id = '';
- }else {
- let items = this.typelist[this.active];
- this.ac_id = items.ac_id;
- }
- this.active = event.detail.name;
- this.ispull = true;
- this.page = 1;
- this.acrelist = [];
- this.getlist();
- },
-
- // 滚动到顶部
- upper(e) {
- console.log(e)
- console.log("顶部")
- },
-
- // 滚到底部
- lower(e) {
- this.page = this.page + 1;
- if(this.ispull) {
- this.getlist();
- }
- },
-
- // 滚动时触发
- scroll(e) {
- if(e.detail.scrollTop > 400) {
- this.isTop = true;
- }else{ //当距离小于500时显示回到顶部按钮
- this.isTop = false;
- }
- this.old.scrollTop = e.detail.scrollTop
- },
- }
- }
- </script>
- <style>
-
- .hotelList {
- display: flex;
- flex-direction: row;
- padding: 24upx 32upx;
- }
-
- .hotleLeft {
- width: 214upx;
- height: 152upx;
- }
-
- .hotelright {
- padding-left: 16upx;
- display: flex;
- flex-direction: column;
- width: 100%;
- justify-content: space-between;
- }
- .searchType .input-view {
- width: 85%;
- display: flex;
- background-color: #e7e7e7;
- height: 30px;
- border-radius: 15px;
- padding: 0 4%;
- flex-wrap: nowrap;
- margin: 7px 0;
- line-height: 30px;
- margin: 24upx auto;
- }
-
- .searchType .input-view .uni-icon {
- line-height: 30px !important;
- }
-
- .searchType .input-view .input {
- height: 30px;
- line-height: 30px;
- width: 94%;
- padding: 0 3%;
- }
- </style>
|