• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序实现web端锚点功能

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1.wxml布局样式

<view class='container'>
<view class='left'>
  <scroll-view class='leftScroll' scroll-y>
    <block wx:for="{{list}}" wx:key="list">
      <view bindtap='clickScroll' data->{{item}}</view>
    </block>
  </scroll-view>
</view>
<view class='right'>
  <scroll-view class='rightScroll' scroll-y scroll-into-view="{{toView}}" scroll-with-animation="true">
    <block wx:for="{{list}}" wx:key="list">
      <view bindtap='clickScroll' >{{item}}</view>
    </block>
  </scroll-view>
</view>
</view>

2.wscc样式

page{
  width:100%;
  height:100%;
}
.container{
  flex-direction: row;
  height:100%;
}
.left{
  width:100px;
  height:80%;
}
.left scroll-view{
  height:100%;
}
.left view{
  padding:10px;
  text-align: center;
  background-color:#0f0;
  margin-bottom:10px;
  color:#fff;
}
.right{
  flex:1;
  height:80%;
}
.right scroll-view{
  height:100%;
}
.right view{
  height:150px;
  background-color:#f00;
  color:#fff;
  margin-bottom:10px;
}

3.js

data: {
    list: ["list0", "list1", "list2", "list3", "list4", "list5", "list11", "list12", "list13", "list14", "list15", "list25", "list26", "list27", "list28", "list29", "list30"],
    toView: ''
  },

clickScroll:function(e){
    var id = e.currentTarget.dataset.id
    this.setData({
      toView:id
    })
    console.log(e.currentTarget.dataset);
  },

 4.效果图

5.当内容超出固定高度时,小程序中会默认出现滚动条,滚动条的样式影响到美观,所以设置如下样式可将滚动条样式隐藏掉

::-webkit-scrollbar{
  width:0;
  height:0;
  color:transparent;
}

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap