移动端去掉原生滚动条效果

https://github.com/ustbhuangyi/better-scroll

<template>
    <div class="list" ref="wrapper">
     <div class="">
       <div class="current">
         <div class="current-title">当前</div>
         <div class="current-button">正在获取位置信息</div>
       </div>
       <div class="hot-city">
         <div class="hot-title">热门城市</div>
         <div class="hot-list">
           <div class="hot-button" v-for="item in hotCities" :key="item.id">{{item.city}}</div>
         </div>
       </div>
       <div class="area">
         <div class="area-wrapper" v-for="(item,key) in cities"  :key="key">
           <div class="area-title">{{key}}</div>
           <div class="area-list">
             <div class="area-button border-bottom" v-for="innerItem in item" :key="innerItem.id">{{innerItem.name}}</div>
           </div>
         </div>

       </div>
     </div>
    </div>
</template>

<script>
  import BScroll from 'better-scroll'
  export default {
        name: "locationList",
      data(){
          return{
            cities:{
              "A":[{
                id:'00001',
                name:'安庆'
              },
                {
                  id:'00002',
                  name:'安顺'
                },
                {
                  id:'00003',
                  name:'安阳'
                },
                {
                  id:'00004',
                  name:'鞍山'
                },
                {
                  id:'040005',
                  name:'鞍山'
                },
                {
                  id:'004006',
                  name:'鞍山'
                },
                {
                  id:'00007',
                  name:'鞍山'
                }],
              "B":[{
                id:'000001',
                name:'北京'
              },
                {
                  id:'000002',
                  name:'安顺'
                },
                {
                  id:'000003',
                  name:'安阳'
                },
                {
                  id:'000004',
                  name:'鞍山'
                },
                {
                  id:'000005',
                  name:'安顺'
                },
                {
                  id:'0000063',
                  name:'安阳'
                },
                {
                  id:'0000074',
                  name:'鞍山'
                }]
            },
            hotCities:[{
              id:'001',
              city:'北京'
            },
              {
                id:'002',
                city:'南京'
              },
              {
                id:'003',
                city:'天津'
              },
              {
                id:'004',
                city:'北京'
              }]
          }
      },mounted(){
           const scroll = new BScroll(this.$refs.wrapper,{
             click: true,
             mouseWheel: {
               speed:20,
               invert:false,
               easeTime:300
             }
           })

    }
    }
</script>

<style lang="stylus" scoped>
.border-bottom
  &:before
    border-bottom:.02rem solid #ccc
.list
  overflow:hidden
  background-color :#e9ecf1
  position:absolute
  top:1.12rem
  bottom:0
  width:100%
  z-index:1
  .hot-city
   overflow :hidden
  .current-title,.hot-title,.area-title
    margin-left :.4rem
    padding :.2rem 0
  .hot-title
    margin-bottom :-.1rem
  .current-button,.hot-button,.area-button
    line-height :.44rem
    background-color :#fff
    text-align: left
    border-radius :.1rem
    padding :.2rem .2rem
    margin-left :.2rem
  .current-button
    width :84%
   .hot-button
    text-align :center
    float:left
    width:15%
    margin-top :.2rem
  .area-list
    background-color:#ffffff
    overflow :hidden
    .area-button
     width:100%

</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值