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)
  }



})