scrollerview

scrollerview scrollerview滑动

控制<scroller>组件左右移动

注意事项

scrollerview 模块目前只在我们JSNative app端支持，web端不支持

API

followedHorizontalScroll(ref,offestX)

控制<scroller>组件左右移动。用于多个scroller组件级联滑动

参数

• ref{string}：执行完读取操作后的回调函数。
• offestX{float}：x方向的坐标。

使用方法

<template>
  <div>
    <div class="title" :style="{backgroundColor:titlebg}" >
      <!-- <div class="titleTextDiv">
        <text class="titletext" :value="titlename" :style="{color:titlecolor}"></text>
      </div> -->
      <scroller ref="titlescroller" show-scrollbar=false scroll-direction='horizontal' style=" flex-direction:row; " :scrollable="false" >
        <div class="tabitem" style="flex-direction: row;" v-for="item in titlelist">
          <text class="tabtitle" :value="tabtitlemap[item]"></text>
        </div>
      </scroller>
    </div>
    <div class="bottomline"></div>
    <list class="ranklist" scroll-direction='vertical' style="flex-direction:column;" :style="{backgroundColor:tableViewBackgroundColor}">
      <cell>
        <div style="flex-direction: row;">
          <div>
            <div style="height:120;width:200;flex-direction: column; justify-content: center;border-bottom-width: 1;
      border-bottom-color: #f0f0f0;" v-for="item in bottomlist">
              <text class="lefttext"  :value="item.prod_name"></text>
              <div style="flex-direction: row;">
                <text class="lefttext2" :value="item.prod_code_all"></text>
              </div>
            </div>
          </div>
          <scroller ref="rightscroller" show-scrollbar=false scroll-direction='horizontal' style=" flex-direction:row;" @scroll="scroll" >
            <div>
              <div style="flex-direction: row;
        height: 120;border-bottom-width: 1;
      border-bottom-color: #f0f0f0;align-items:center;" v-for="item in bottomlist">
                  <div style="flex-direction: column;" v-for="items in item.data">
                  <text class="righttext"  :value="items.value" ></text>
                  </div>
              </div>
            </div>
          </scroller>
        </div>
      </cell>
    </list>
  </div>
</template>

<style >
  .root {
    width:750px;
      position:absolute;
      bottom:0;
  }
  .title{
    flex-direction: row;
    height: 70px;
  }
  .ranklist {
    flex-direction:column;
    position:absolute;
    left: 0;
    top: 72;
    right: 0;
    bottom: 0;
  }
  .titleTextDiv{
    flex-direction: row;
    align-items:center;
    height:70px;
  }
  .titletext{
    width:200px;
    font-size: 26px;
    padding-left: 10px;
  }
  .tabitem{
    width: 200px;
    height: 70px;
    align-items: center;
    justify-content: center;
  }
  .tabtitle {
    font-size: 26px;
    color: #999999;
  }
  .lefttext{
    lines:1;
    padding-left: 10px;
    text-overflow: ellipsis;
  }
  .lefttext2{
    lines:1;
    font-size: 20px;
    margin-top:2px;
    padding-left: 10px;
  }
  .righttext{
    width: 200;
    font-size: 28px;
    text-align: center;
  }
  .righttext2{
    width: 200;
    height: 60;
    font-size: 28px;
    text-align: center;
    padding-top: 5;
    color: #999999;
  }
  .bottomline {
    width: 750;
      height: 1;
      background-color: #d6d6d9;
  }
</style>

<script>
 import Light from "light"
  const scrollerView = Light.requireModule('scrollerview');
  module.exports = {
    data:function(){
      return{
         titlebg: "#F8F8F8" ,
        titlename:"名称/代码",
         titlecolor:"#999999",
        tableViewBackgroundColor:"#ffffff",
        bottomlist:[
          {prod_name:"恒生电子",prod_code_all:"600570.SS",
            data:
            [
              {"key": "last_px", "value": 50, "color": "#000"},
              {"key": "px_change_rate", "value": '3%', "color": "#000"},
              {"key": "px_change", "value": 2, "color": "#000"},
              {"key": "business_amount", "value": 100000, "color": "#000"},
              {"key": "business_balance", "value": 100000, "color": "#000"},
              {"key": "turnover_ratio", "value": 20, "color": "#000"},
              {"key": "preclose_px", "value": 50, "color": "#000"}
            ]
          },
          {prod_name:"恒生电子",prod_code_all:"600570.SS",data:[
            {"key": "last_px", "value": 50, "color": "#000"},
            {"key": "px_change_rate", "value": '3%', "color": "#000"},
            {"key": "px_change", "value": 2, "color": "#000"},
            {"key": "business_amount", "value": 100000, "color": "#000"},
            {"key": "business_balance", "value": 100000, "color": "#000"},
            {"key": "turnover_ratio", "value": 20, "color": "#000"},
            {"key": "preclose_px", "value": 50, "color": "#000"}
          ]},
          {prod_name:"恒生电子",prod_code_all:"600570.SS",data:[
            {"key": "last_px", "value": 50, "color": "#000"},
            {"key": "px_change_rate", "value": '3%', "color": "#000"},
            {"key": "px_change", "value": 2, "color": "#000"},
            {"key": "business_amount", "value": 100000, "color": "#000"},
            {"key": "business_balance", "value": 100000, "color": "#000"},
            {"key": "turnover_ratio", "value": 20, "color": "#000"},
            {"key": "preclose_px", "value": 50, "color": "#000"}
          ]},
          {prod_name:"恒生电子",prod_code_all:"600570.SS",data:[
            {"key": "last_px", "value": 50, "color": "#000"},
            {"key": "px_change_rate", "value": '3%', "color": "#000"},
            {"key": "px_change", "value": 2, "color": "#000"},
            {"key": "business_amount", "value": 100000, "color": "#000"},
            {"key": "business_balance", "value": 100000, "color": "#000"},
            {"key": "turnover_ratio", "value": 20, "color": "#000"},
            {"key": "preclose_px", "value": 50, "color": "#000"}
          ]}
        ],
        titlelist:["last_px","px_change_rate","px_change","business_amount","business_balance","turnover_ratio","preclose_px"],
        tabtitlemap: {
          "last_px": "最新价",
          "px_change_rate": "涨跌幅",
          "px_change": "涨跌额",
          "business_amount": "成交量",
          "business_balance": "成交额",
          "turnover_ratio": "换手率",
          "preclose_px": "昨收价"
        }
      }
    },

    methods:{
      //滑动事件
      scroll:function(event){
          //监听右侧scroller左右滑动的时候 头部tab也需要跟随滑动
        var scrollx = event.contentOffset.x;
        // this.cachescrollerx = scrollx <0? scrollx:scrollx;
        if(scrollx < 0) {
          this.cachescrollerx = scrollx
        } else if (!isNaN(scrollx)) {
          this.cachescrollerx = 0;
        } else {
          return;
        }
        if (this.$refs.titlescroller.followedHorizontalScroll){
          this.$refs.titlescroller.followedHorizontalScroll(this.cachescrollerx);
        }else if (scrollerView){
          var el = this.$refs.titlescroller;
          scrollerView.followedHorizontalScroll(el,this.cachescrollerx);
        }     
      }
    },
    created:function(){
    },
  }
</script>