1. 程式人生 > >vue 新聞列表滾動效果

vue 新聞列表滾動效果

<div class="scroll-wrap">
            <div class="scroll-content" :style="{ top }" @mouseenter="Stop()" @mouseleave="Up()">
              <p v-for="item in prizeList"><a :href="item.src">{{item.name}}</a></p>
   <div>

<div>

export default {
    name: 'complexTable',
    data() {
      return {
        prizeList: [
          { name: '城軌採購網',src:'http://www.railunique.com'},
          { name: '天津地鐵電子採購平臺',src:'http://www.railunique.com' },
          { name: '南昌地鐵',src:'http://www.railunique.com' },
          { name: '南昌地鐵',src:'http://www.railunique.com' },
          { name: '蘭州地鐵招標資訊',src:'http://www.railunique.com' },
          { name: '西安公共資源交易中心',src:'http://www.railunique.com' },
        ],

        activeIndex: 0,

         intnum: undefined

      }
    },
    computed: {
      top() {
        return - this.activeIndex * 50 + 'px';
      }

    },

        created() {
  this.ScrollUp();
},
methods: {
ScrollUp(){
this.intnum = setInterval(_ => {
  if (this.activeIndex < this.prizeList.length) {
this.activeIndex += 1;
  } else {
this.activeIndex = 0;
  }
}, 1000);

  },

  Stop(){
clearInterval(this.intnum);
},
  Up(){
this.ScrollUp();
}
  }
   

  }

<style>
  .scroll-wrap{
    height: 150px;、、
    overflow: hidden;
  }
  .scroll-content {
    position: relative;
    transition: top 0.5s;
  }
  .scroll-content p{
    line-height: 50px;
    text-align: center;

  }

</style>

相關推薦

vue 新聞列表滾動效果

<div class="scroll-wrap">             <div class="scroll-content" :style="{ top }" @mouseent

vue列表過渡效果

hit ali AC 如果 列表 是個 spa 一個 back <transition-group></transition-group> ① 列表 <transition-group> </transition-group>

vue利用better-scroll實現通訊錄式列表滾動和左右聯動效果(2)

3.右邊字母列表滑動或者點選時對應的字母高亮 _calculateHeight () { this.listHeight = [] const list = this.$refs.listgroup let height = 0

vue 2.0 實戰移動音樂app(六)歌手頁面列表滾動 無法正確滾動

listview.vue <template> <scroll class="listview" :data='data' ref="listview"> <ul> <li v-for='group in data' class=

vue實現訊息的無縫滾動效果

export default { data() { return { animate:false, items:[ {name:"馬雲"}, {name:"雷軍"}, {name:"王勤"}

vue中數字變化滾動效果

滾動元件部分程式碼如下: <template> <div class="number-grow-warp"> <span ref="numberGrow" :

HTML文字滾動效果<marquee>

spa down 開始 一次 alternate 設置 離開 rec sta <marquee></marquee> 屬性:(1)behavior:設置滾動方式       a)alternate:在邊框之間來回滾動       b)Scroll:循

marquee實現滾動效果

har 一段 對齊方式 頁面 head 發現 vsp 包括 org 頁面的自動滾動效果,可由javascript來實現,但是今天無意中發現了一個html標簽 - <marquee></marquee>可以實現多種滾動效果,無需js控制。 使用marq

JavaScript-html標題滾動效果

charset 設置 script split dsm ctype java title document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

仿qq會話列表滑動效果

滑動事件 style 執行 位移 記錄 htm kit lis rem 一、功能分析 qq會話列表可以向左滑動,然後出現刪除按鈕 二、知識點 touch事件,css3的transform屬性 三、實現思路 為每個列表項綁定touch事件,計算touch移動的距離,在touc

圖片的無縫滾動效果

-- adding margin image left offset mage lang cti 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <met

JS實現圖片滾動效果

settime .cn itl family .text rgba plus ++ san   源碼參考菜鳥教程:<iframe width="100%" height="300" src="https://c.runoob.com/iframe/2037" allo

關於vue滾動監聽失效問題

top scrolltop ont bsp .cn vue 資料 index document 在vue項目中, 監聽window滾動失效;並且document.body.scrollTop一直是0的情況! 查找了許多資料;並沒有找到合理的解決方案; 最中發現,在in

純css3實現文字間歇滾動效果

vue gin span 需要 display () app counter happy 場景: 假設有4條數據或者標題,視口中只顯示兩條,采用每次向上滾動一條數據來展示所有的數據。效果如圖: 用JavaScript也很容易實現,但是需要操作DOM,可以參考這篇博客。考慮

jq封裝-無縫滾動效果

over == line tac 表示 動效 dir app timer <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <

【2018-01-23】HTML-插入視頻、音樂,簡單滾動效果

視頻 embed blog 默認 loop alternate idt 方向 範圍 插入視頻:在優酷等視頻網站,找到分享位置,復制html代碼,貼入網頁中自動播放:swf後面?VideoIDS=XNDA3OTM4NA=&isAutoPlay=true&isS

AngularJS 指令 實現文本水平滾動效果

inner 滾動效果 dom對象 定時任務 oot 水平 ack -i .org <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

HTML標簽marquee實現滾動效果

int pro return set gin 緩存 wip select lex <?phpinclude "../library/mFunction.php"; /**************選取商品一級分類**********/$result=mysql_que

全屏背景視覺差滾動效果

get resize ans 滾動條 效果 mas city eight 視覺 <div class="wrap"> <div class="one item"> <di

27.jquery模擬滾動效果

頁面 light 一次 win 定時 request slide asc created <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"