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

2019-08-13 09:56:50 阅读：232 来源： 互联网

标签：right 程序实现微信 100% height color 锚点 id view

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-id="{{item}}">{{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' id="{{item}}">{{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

Page({
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);
  },
  })

标签：right,程序实现,微信,100%,height,color,锚点,id,view
来源： https://www.cnblogs.com/yuan9580/p/11344007.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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