hlm_pl_mall_h5/pages/home/index/IndexArticle.vue

<template>
    <view class="div index-article">
        <flex-line class="article-wrapper" :show-border="true">
            <view class="div wrapper">
                <text class="em title"><text class="span" style="color:#000">最新</text>资讯</text>
                <view class="ul scroll-content" :style="top" >
                    <view  class="li" v-for="(item, index) in items" :key="index" @click="goArticleDetail(item)">
                        {{item.article_title}}
                    </view>
                </view>
            </view>
            <view slot="right" class="div more common-btn" @click="goHomeArticlelist('1')">点击查看</view>
        </flex-line>
    </view>
</template>

<script>
    import { urlencode } from '@/util/common'
    import flexLine from '../../flexLine'
export default {
  name: 'IndexArticle',
  data () {
    return {
      activeIndex: 0
    }
  },
    components:{
        flexLine
    },
  props: ['items'],
  computed: {
    top () {
      return 'top:'+ (-this.activeIndex * 2) + 'rem'
    }
  },
  beforeDestroy: function () {
    clearInterval(this.time_interval)
  },
  mounted () {
    let _this = this
    this.time_interval = setInterval(function () {
      if (_this.activeIndex < (_this.items.length-1)) {
        _this.activeIndex += 1
      } else {
        _this.activeIndex = 0
      }
    }, 2000)
  },
  methods: {
    goHomeArticlelist (acId) {
      uni.navigateTo({ url: '/pages/home/article/Articlelist'+'?'+urlencode( { ac_id: acId } )})
    },
    goArticleDetail (item) {
      uni.navigateTo({ url: '/pages/home/article/Articledetail'+'?'+urlencode( { 'article_id': item.article_id } )})
    }
  }
}
</script>

<style scoped lang="scss">
    .index-article{
        background:#fff;
        padding-bottom:$modelSpace;
        .article-wrapper{
            .wrapper{
                height: 2rem;
                line-height:2rem;
                overflow: hidden;
                display:flex;
                align-items: center;
                margin-left:$pageSpace;
            }
        }
    }
    .title{text-align:center;font-size:$mainFontSize;font-weight:700;color:$primaryColor;padding:0 0.5rem;}
    .more{background: $primaryGradualColor;color: #fff;box-shadow: 0px 2px 4px #ffd5d7;margin-right:$pageSpace;}
    .scroll-content{
        align-self:flex-start;
        flex:1;
        position: relative;
        transition: top 0.5s;
    .li{
        line-height: 2rem;
        text-align: left;
        font-size:$fontSize;
        color:$descTextColor;
        font-weight: normal;
    }
    }
</style>