scroll-view 顯示滑動條並且自定義滑動條位置

一、前言

1、方法：先暫時設定scroll-view高度（目的：先定位滾動條位置，不然滾動條會跑到下面太遠），0.5秒后放開scroll-view高度 

2、如果收張不處理會影響滾動條位置，用1方法處理就行

二、代碼部分(直接粘貼的)

1、wxml

<view class="open" style="{{djclass == 0 ?'':'display:none'}}">
    <view class='title'>
       全國質量總覽
    </view>
    <!-- <view class='title01'>
       全國質量總覽
    </view> -->
    <view class='min'>
        <view class='min-top'>
            <view class='min-one fl'>質量(100%)</view>
            <view class='min-two fl'>較差</view>
            <view class='min-three fl'>中等</view>
            <view class='min-four fl'>較好</view>
            <view class='min-five fl'>很好</view>
        </view>
        <view class='min-con'>
          
            <scroll-view  scroll-x="true" class="scroll-header" style="{{sc_action==1?'':'height:50%;'}}">
             <!-- <image class="scroll-view-item " src='http://img.possji.cn/qing-20190519/img01.png'></image> -->
                  <image src='../../image/img06.png'></image>
            </scroll-view>
        </view>
       
    </view>
</view>

2、滾動條css

::-webkit-scrollbar  
{  
    width: 30rpx;  
    height: 40rpx;  
    background-color: #F5F5F5;  
    border-radius: 20rpx;  
    overflow: hidden;
}  
  
/*定義滾動條軌道 內陰影+圓角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);  
    border-radius: 20rpx;  
     background-color: #555;  
     
}  
  
/*定義滑塊 內陰影+圓角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 20rpx;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);  
    background-color: #F5F5F5;  
}  


.min-con{
  height: 430rpx;
}

3、js

//index.js
//獲取應用實例
const app = getApp()

Page({
  data: {
    selectShow: false,//控制下拉列表的顯示隱藏，false隱藏、true顯示
    selectShowTz: false,//圖層-控制下拉列表的顯示隱藏，false隱藏、true顯示
    selectData: ['首頁', '種植區', '香梨區', '香梨區', '香梨區', '香梨區'],//下拉列表的數據
    selectDataTz: [['圖層', '地形圖', '影像圖', '地名圖層'], ['ico02.png','ico10.png','ico11.png','ico12.png']],//圖層-下拉列表的數據
    selectDataXx: ['清甜香型', '蜜甜香型','酸甜香型'],//香型-下拉列表的數據
    s_index: 0,//選擇的下拉列表下標
    s_index_t: 0,//圖層-選擇的下拉列表下標
    s_index_x: -1,//香型-選擇的下拉列表下標
    number: 1,
    develop:'收起',
    djclass: 0,
    //  初始化定位
    initials:3,
    locations:4,

    sc_action:0,
  },
  // 點擊下拉顯示框
  selectTap() {
    var number = this.data.number;
    this.setData({
      selectShow: !this.data.selectShow,
      number: number == 1 ? 5 : 1,
    });
  },
  // 點擊下拉顯示框-圖層
  selectTapTz() {
    this.setData({
      selectShowTz: !this.data.selectShowTz,
    });
  },
  //選擇香型
  selectXx:function(e){
    this.setData({
      s_index_x:e.detail.value
    })
  },
  // 點擊下拉列表
  optionTap(e) {
    let Index = e.currentTarget.dataset.index;//獲取點擊的下拉列表的下標
    this.setData({
      s_index: Index,
      selectShow: !this.data.selectShow,
    });
  },
  // 點擊下拉列表-圖層
  optionTapTz(e) {
    let Index = e.currentTarget.dataset.index;//獲取點擊的下拉列表的下標
    this.setData({
      s_index_t: Index,
      selectShowTz: !this.data.selectShowTz,
    });
  },
  // 收起展開
  onclick: function () {
    var that = this;
    var djclass = that.data.djclass
    var sc_action = that.data.sc_action
    that.setData({
      djclass: djclass == 1 ? 0 : 1,
      // sc_action: sc_action == 1 ? 0 : 1,
      develop: '展開'
    })
    if (djclass==0){
      that.setData({
        sc_action:0
      })
    }else{
      that.setScAction();
    }
  },
  // 初始化定位
  initial:function(){
    var that=this;
    var initials = that.data.initials
    that.setData({
      initials: initials == 3 ? 7 : 3,
    })
  },
  
  location: function() {
      var that = this;
    var locations = that.data.locations
      that.setData({
        locations: locations == 4 ? 8 : 4,
      })
    },
  //事件處理函數
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回
      // 所以此處加入 callback 以防止這種情況
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在沒有 open-type=getUserInfo 版本的兼容處理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function (e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
  onShow:function(){
    this.setScAction();
  },
  setScAction:function(){
    var that = this;
    setTimeout(function () {
      that.setData({
        sc_action: 1
      })
    }, 500)
  }



})