小程序滚动到指定位置scroll-into-view

淩亂°似流年 2021-10-18 22:32 1203阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

<view class="businessCard-bot">
        <scroll-view class="businessCard-bot-left floarLeft" scroll-y style="height:{
       {viewHeg}}px" scroll-into-view="{
       {toIndex}}" scroll-with-animation="true" enable-back-to-top="true">
          <view wx:for="{
       {cardData}}" wx:key="{
       {item.id}}" id="{
       {item.latter}}">
            <view class="scroll-header">
              {
       {item.latter}}
            </view>
            <navigator url="/pages/mingpianxinxi/mingpianxinxi" hover-class="none" wx:for="{
       {item.datas}}" wx:for-item="itemName" wx:key="{
       {itemName.id}}">
              <image src="{
       {itemName.img}}" class="floarLeft"></image>
              <view class="card-right floarLeft">
                <view class="authentication overHiden">
                  <view class="authentication-left floarLeft">
                    {
       {itemName.name}}
                  </view>
                  <view class="authentication-right floarRight">
                    {
       {itemName.time}}
                  </view>
                </view>
                <view class="card-cent overHiden">
                  <view wx:for="{
       {itemName.note}}" wx:for-item="itemNamenumber">{
       {itemNamenumber}}</view>
                </view>
                <view class="card-bottom overHiden">
                  <view>{
       {itemName.company}}</view>
                  <view>{
       {itemName.catio}}</view>
                </view>
              </view>
            </navigator>
          </view>
        </scroll-view>
        <view class="businessCard-bot-right floarRight" style="height:{
       {viewHeg}}px">
          <view wx:for="{
       {letter}}" wx:key="*this" data-letter="{
       {item}}" bindtap="clickLetter">{
       {item}}</view>
        </view>
      </view>

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        toIndex:'',//跳转的索引,这哥们必须动态更改才可以使滑动生效
        letterArray: [   //默认获取的所有通讯录名片数据
          {
            id:0,
            latter: 'A',
            datas: [
              {
                id: 0,
                img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1570457170,3487092162&fm=26&gp=0.jpg',
                name: '俺不知道',
                time: '2018-05-14',
                note: ['医疗服务1', '信息系统', '新闻资讯1'],
                company: '优派世纪咨询(北京)有限公司',
                catio: '已认证',
                latter: 'A',
              }
            ]
          }, {
            id: 1,
            latter: 'B',
            datas: [
              {
                id: 0,
                img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1570457170,3487092162&fm=26&gp=0.jpg',
                name: '波澜',
                time: '2018-05-14',
                note: ['医疗服务222', '信息系统', '新闻资讯'],
                company: '优派世纪咨询(北京)有限公司',
                catio: '已认证',
                latter: 'B'
              }, {
                id: 1,
                img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1570457170,3487092162&fm=26&gp=0.jpg',
                name: '霸王',
                time: '2018-05-14',
                note: ['医疗服务', '信息系统333', '新闻资讯444'],
                company: '优派世纪咨询(北京)有限公司',
                catio: '已认证',
                latter: 'B'
              }
            ]
          }, {
            id: 2,
            latter: 'C',
            datas: [
              {
                id: 0,
                img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1570457170,3487092162&fm=26&gp=0.jpg',
                name: '茶叶',
                time: '2018-05-14',
                note: ['医疗服务', '信息系统', '新闻资讯'],
                company: '优派世纪咨询(北京)有限公司',
                catio: '已认证',
                latter: 'C'
              }
            ]
          },{
            id: 3,
            latter:'M',
            datas:[
              {
                id: 0,
                img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1570457170,3487092162&fm=26&gp=0.jpg',
                name: '魔鬼',
                time: '2018-05-14',
                note: ['医疗服务2222', '信息系统', '新闻资讯'],
                company: '优派世纪咨询(北京)有限公司',
                catio: '已认证',
                latter: 'M'
              }, {
                id: 1,
                img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1570457170,3487092162&fm=26&gp=0.jpg',
                name: '码云',
                time: '2018-05-14',
                note: ['医疗服务', '信息系统333', '新闻资讯'],
                company: '优派世纪咨询(北京)有限公司',
                catio: '已认证',
                latter: 'M'
              }, {
                id: 2,
                img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1570457170,3487092162&fm=26&gp=0.jpg',
                name: '妈妈',
                time: '2018-05-14',
                note: ['医疗服务', '信息系统', '新闻资讯444'],
                company: '优派世纪咨询(北京)有限公司',
                catio: '已认证',
                latter: 'M'
              },
              {
                id: 3,
                img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1570457170,3487092162&fm=26&gp=0.jpg',
                name: '蘑菇街',
                time: '2018-05-14',
                note: ['医疗服务4444', '信息系统', '新闻资讯'],
                company: '优派世纪咨询(北京)有限公司',
                catio: '已认证',
                latter: 'M'
              }, {
                id: 4,
                img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1570457170,3487092162&fm=26&gp=0.jpg',
                name: '梦梦',
                time: '2018-05-14',
                note: ['医疗服务', '信息系统4444', '新闻资讯'],
                company: '优派世纪咨询(北京)有限公司',
                catio: '已认证',
                latter: 'M'
              }
            ]
          }
        ],
        cardData:[],//展示的名片通讯录数据
        letter: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
        viewHeg:544
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        const that = this;
    
        // 获取默认数据
        that.setData({
          cardData : that.data.letterArray
        })
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      },
      // 点击字母
      clickLetter:function(e){
        console.log("打印",e);
        var that=this;
        var letter = e.currentTarget.dataset.letter;
        wx.showToast({
          title: letter,
          icon: 'none',
          duration: 2000
        })
        // 滚动跳转位置
        that.setData({
          toIndex: letter
        })
      }
    })

.businessCard-bot{width: 100%; overflow: hidden;position: relative;}
    .businessCard-bot-right{width: 60rpx;background-color: #ffffff;margin-left: 10rpx;position: absolute;right: 0;top: 0;z-index: 99;}
    .businessCard-bot-right>view{line-height: 39rpx;text-align: center;}
    .businessCard-bot-left{width: calc(100% - 70rpx);overflow: auto;}
    .businessCard-bot-left navigator{background-color: #ffffff;margin-bottom: 10rpx;overflow: hidden;padding:20rpx;}
    .businessCard-bot-left navigator:last-child{margin-bottom: 0;}
    .businessCard-bot-left navigator>image{width: 150rpx;height: 150rpx;border-radius: 5rpx;}
    .card-cent>view,.card-bottom>view{float: left;}
    .card-right{width: calc(100% - 150rpx);padding-left: 20rpx;}
    .authentication-left{font-size: 30rpx;font-weight: 500;}
    .authentication-right{color: #999999;}
    .card-cent>view{border: 1px solid orange;color: orange;font-size: 20rpx;padding:  5rpx 10rpx;margin-right: 10rpx;}
    .card-cent{margin: 10rpx 0;}
    .card-bottom>view:first-child{font-size: 30rpx;width: calc(100% - 80rpx);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    .card-bottom>view:last-child{font-size: 20rpx;border: 1px solid #2fb69d;color: #2fb69d;margin-top: 3rpx;}
    .businessCard-top{position: fixed;left: 0;top: 20rpx;z-index: 9;width: 100%;}
    .businessCard-cent{position: fixed;left: 0;top: 100rpx;z-index: 9;}
    .businessCard-bot{position: fixed;left: 0;top: 210rpx;z-index: 9;width: 100%;}
    .businessCard-bot-right{overflow: auto;}
    .scroll-header{line-height: 60rpx;padding-left: 20rpx;}

小程序文档：[https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html][https_developers.weixin.qq.com_miniprogram_dev_component_scroll-view.html]

**如果有帮到你的话，欢迎激励一下作者。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20211018/bdd7519cb3ad451cacd022dcc74931a4.png
[https_developers.weixin.qq.com_miniprogram_dev_component_scroll-view.html]: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1]: /images/20211018/1178be37d7784b058ef0bca8213e8d03.png