实现锚点效果scroll-view的scroll-into-view属性+微信小程序手动画表格

 1.实现效果列表中每一项都有一个属性值,如果该属性值为1,则进入页面直接滑动该列数据到列表顶部(以下为自己画)(注:代码中实现滑动练习demo(效果ok)标注的代码为正常的列表滑动可以参考)

1-0.实现例子所示

如图所示,该列表中12/8为属性是1,则该列在最上面显示(此图为12/8下面数据太少,所以没有到顶部)

1-1设计图

以下是微信小程序中自己画的表格(根据ui和后端数据相结合画的有点乱哦~)

1-1wxml

<!--pages/mySchedulePage/mySchedulePage.wxml-->
<view class="page">
  <image class="bg_img" src="{{bgUrl}}" mode="" />
  <view class="dtwion">
    <view bindtap="changeuseBack">
      <image class="chageuseback" src="../../images/change-user-back.png" mode="" />
    </view>
    <image class="runtext" src="../../images/myschel.png" mode="" />
  </view>
  <view wx:if="{{isOver==false}}">
    <view class="opschele">
      <view class="onedate">日期</view>
      <view class="twotime">时间</view>
      <view class="threebattle">对阵</view>
      <view class="fourachiev">成绩</view>
    </view>
    <!-- 表格 -->
    <scroll-view class="tabfirst" scroll-y scroll-into-view="{{'item-'+toView}}" scroll-with-animation="true">
      <!-- <view class="tabfirst"> -->
      <!-- <table> -->
      <!-- 实现滑动练习demo(效果ok)-->
      <!-- <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index">
      <view id="{{'item-'+index}}" class="list-item" bindtap="jumpTo">
        {{item.item}}
      </view>
    </view> -->
    
      <!-- 页面代码 -->
      <view class="allblock" wx:for="{{listArry}}" wx:for-item="item" wx:for-index="index">
        <view class="firstlist" id="{{'item-'+index}}" bindtap="jumpTo">
          <view class="oneblock">
            <view class="righttdate">
              <view class="rigtex">{{item.newTime}}</view>
            </view>
            <view style="display: flex; ">
              <view class="twoblocka" wx:for="{{item.qpScheduleList}}" wx:if="{{indexx===0&&(itemm.timeType==1)}}" wx:for-item="itemm" wx:for-index="indexx">
                <view class="rightimea">全天</view>
              </view>
              <view style="display: flex; flex-direction: column;">
                <view wx:for="{{item.qpScheduleList}}" wx:for-item="itemm" wx:for-index="indexx" wx:if="{{itemm.timeType==2}}">
                  <view class="twoblock">
                    <view class="rightime">{{itemm.startTime}}-{{itemm.endTime}}</view>
                  </view>
                </view>
              </view>
              <view>
                <view style="display: flex; flex-direction: column;" wx:for="{{item.qpScheduleList}}" wx:for-item="itemm" wx:for-index="indexx">
                  <view class="threeblock" wx:if="{{itemm.isRandom==1}}">
                    <view class="leftcontent">随机组队</view>
                  </view>
                  <view class="threeblock" wx:if="{{itemm.isRandom==0}}">
                    <view class="leftcontent">{{itemm.vsStr}}</view>
                  </view>
                </view>
              </view>

              <view style="display: flex;flex-direction: column;">
                <view class="fourblock" wx:for="{{item.qpScheduleList}}" wx:for-item="itemm" wx:for-index="indexx">
                  <view wx:if="{{itemm.result==0}}" class="leftrton">-</view>
                  <view wx:if="{{itemm.result==1}}" class="leftrighton">胜利</view>
                  <view wx:if="{{itemm.result==2}}" class="leftlefton">失败</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>


      <!-- </table> -->


    </scroll-view>
    <view style="height: 10rpx;width: 100%;"></view>
  </view>
  <view wx:if="{{isOver==true}}">
    <view class="obowr">暂无数据</view>
  </view>
</view>

1-2 wxss

/* pages/mySchedulePage/mySchedulePage.wxss */
.page {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.18);
}
.bg_img{
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}
.dtwion{
  display: flex;
}
.chageuseback{
  width: 17rpx;
  height: 15rpx;
  margin-top: 25rpx;
  margin-left: 29rpx;
}
.runtext{
  width: 70rpx;
  height: 15rpx;
  margin-top: 37rpx;
  margin-left: 293rpx;
}
.opschele{
  display: flex;
  margin-top: 23rpx;
  padding-bottom: 10rpx;
}
.onedate{
  font-size: 12rpx;
   height: 16rpx;
   line-height: 14rpx;
   color: #ffffff;
   font-weight: 500;
   margin-left: 79rpx;
}
.twotime{
  font-size: 12rpx;
  height: 16rpx;
  line-height: 14rpx;
  color: #ffffff;
  font-weight: 500;
  margin-left: 112rpx;
}
.threebattle{
  font-size: 12rpx;
  height: 16rpx;
  line-height: 14rpx;
  color: #ffffff;
  font-weight: 500;
  margin-left: 203rpx;
}
.fourachiev{
  font-size: 12rpx;
  height: 16rpx;
  line-height: 14rpx;
  color: #ffffff;
  font-weight: 500;
  margin-left: 184rpx;
}
/* 表格 */
.tabfirst{
  overflow: hidden;
  width: 683rpx;
  margin-left: 34rpx;
  max-height: 237rpx;
  border-top:1rpx solid #1BD5EC;
  border-left: 1rpx solid #1BD5EC; 
  border-right: 1rpx solid #1BD5EC; 
  border-radius: 3rpx;

}
.allblock{
  align-items: center;
}
.firstlist{
  display: flex;
  background-color: #00000020;
}
.oneblock{
  display: flex;
  text-align: center;
}
.twoblocka{
  position: relative;
  width: 151rpx;
  text-align: center;
  border-right: 1rpx solid #1BD5EC; 
  border-left: 1rpx solid #1BD5EC; 
  border-bottom: 1rpx solid #1BD5EC;
}
.twoblock{
  width: 151rpx;
  height: 36rpx;
  text-align: center;
  border-right: 1rpx solid #1BD5EC; 
  border-left: 1rpx solid #1BD5EC; 
  border-bottom: 1rpx solid #1BD5EC;
}
.threeblock{
  width: 281rpx;
  height: 36rpx;
  text-align: center;
  /* border-top:1rpx solid #1BD5EC; */
  border-right: 1rpx solid #1BD5EC; 
  border-bottom: 1rpx solid #1BD5EC;
}
.fourblock{
  width: 136rpx;
  height: 36rpx;
  text-align: center;
  border-bottom: 1rpx solid #1BD5EC;
}
.righttdate{
  position: relative;
  width: 113rpx;
  font-size: 12rpx;
  font-weight: 500;
  color: #ffffff;
  padding-top: 11rpx;
  /* align-items: center; */
  padding: 0,auto;
  text-align: center;
  border-bottom: 1rpx solid #1BD5EC;

}
.rigtex{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  height: 16rpx;
}
.rightimea{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 12rpx;
  font-weight: 500;
  color: #ffffff;
}
.rightime{
  font-size: 12rpx;
  font-weight: 500;
  color: #ffffff;
  padding-top: 11rpx;
}
.leftcontent{
  font-size: 12rpx;
  font-weight: 500;
  color: #ffffff;
  /* height: 35rpx; */
  padding-top: 11rpx;
}
.leftrton{
  width: 23rpx;
  height: 16rpx;
  font-size: 12rpx;
  font-weight: 500;
  color: #3DFFD0;
  line-height: 14rpx;
  padding-top: 11rpx;
  padding-left: 65rpx;
}
.leftrighton{
  width: 23rpx;
  height: 16rpx;
  font-size: 12rpx;
  font-weight: 500;
  color: #3DFFD0;
  line-height: 14rpx;
  padding-top: 11rpx;
  padding-left: 57rpx;
}
.leftlefton{
  width: 23rpx;
  height: 16rpx;
  font-size: 12rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #FF8A58;
  line-height: 14rpx;
  padding-top: 11rpx;
  padding-left: 57rpx;
}
.obowr{
  font-size: 30rpx;
  color: #ffffff;
  margin-left: 313rpx;
  margin-top: 100rpx;
}

1-3  js

// pages/mySchedulePage/mySchedulePage.js
var http = require('../../utils/http')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    toView:'',
    scrollTop: 0,
    list:[
      {
        item:'Item 1',
        anchor:0
      },
      {
        item:'Item 2',
        anchor:0
      },
      {
        item:'Item 3',
        anchor:0
      },
      {
        item:'Item 4',
        anchor:1
      },
      {
        item:'Item 5',
        anchor:0
      },
      {
        item:'Item 6',
        anchor:0
      },
      {
        item:'Item 7',
        anchor:0
      },
      {
        item:'Item 8',
        anchor:0
      },
      {
        item:'Item 9',
        anchor:0
      },
      {
        item:'Item 10',
        anchor:0
      },
      {
        item:'Item 11',
        anchor:0
      },
      {
        item:'Item 12',
        anchor:0
      },
      {
        item:'Item 13',
        anchor:0
      },
      {
        item:'Item 4',
        anchor:0
      },
      {
        item:'Item 15',
        anchor:0
      },],
    anchor:'',//接口返回的需要锚点的地方
    intoIndex: '', // 前端要锚点的地方
    isOver:'',
    newTime:'',//日期
    bgUrl:'https://ydhv4.oss-cn-beijing.aliyuncs.com/ee6ceb5ae183eb696e28cda3437f4ca0f5b0da156e68c-VuyMTT_fw1200webp%201.png',
    isSucceed:'',
    // listArry:[
    //   {
    //     data:'2023-11-01 15:11:23',
    //     message:[
    //       {
    //         red:[{name:'林俊杰'},{name:'周杰伦'}],
    //         blue:[{name:'吴彦祖'},{name:'彭于晏'}],
    //         text:[
    //           {
    //             nameA:'林俊杰'
    //           },
    //           {
    //             nameA:'林俊杰'
    //           },
    //           {
    //             nameB:'林俊杰'
    //           },
    //           {
    //             nameB:'林俊杰'
    //           }
    //         ],
    //         isSucceed:0,//1胜利,0失败
    //         timeType:1,
    //         startime:'2023-11-01 15:11:23',
    //         endtime:'2023-11-01 15:11:23',
    //         type:1//组队类型:1随机,2固定
    //       }
    //     ]
    //   },
    
    // ],
    listArry:{},//大数组
    qpScheduleList:{},//里面赛程
    selarry:[],//对决人名
    actionInfo:'',
    userid:''

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let userid = wx.getStorageSync('userid')
    let action = wx.getStorageSync('actioninfo')
    this.setData({
      actionInfo:action,
      userid:userid
    })
    // 实现进入页面新的数据在最上面实现
    // setTimeout(() => {
    //   this.scrollToItem();
    // }, 100); 
    // this.jumpTo()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    let isOver=this.data.isOver
    if(isOver==false){
      this.getMessgae()
    }

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
  // 滚动时候调用
  // scrollToItem(){
  //   const itemId = 'item-2'; // 设置要滚动到的项的 id
  //   this.setData({
  //     scrollIntoView: itemId
  //   });
  // },

  jumpTo(e){
    console.log(this.data.listArry)
    console.log(this.data.list)
    let index = e.currentTarget.dataset.index;
    console.log(index)
    console.log(this.data.listArry[index])
    let anchor=this.data.listArry[index].anchor
    // let target = 2
    if (anchor==1) {
      this.setData({
        toView:'item' + index
      })
      console.log('第几个锚点',this.data.toView)
    }
    console.log('第几个锚点',this.data.toView)
  },
  onScrollView(e) {
    this.setData({
      scrollTop: e.detail.scrollTop
    });
  },
// 实现滑动练习demo(效果ok)
  // jumpTo(e){
  //   let index = e.currentTarget.dataset.index;
  //   console.log(index)
  //   console.log(this.data.list[index])
  //   let anchor=this.data.list[index].anchor
  //   // let target = 2
  //   if (anchor==1) {
  //     this.setData({
  //       toView:index.toString
  //     })
  //     console.log('第几个锚点',this.data.toView)
  //   }
  //   console.log('第几个锚点',this.data.toView)
  // },
  changeuseBack(){
    wx.navigateBack({
      delta:1
    })
  },
  getMessgae(){
    let selfThis=this
    let selectList={}
    let actionInfo=selfThis.data.actionInfo
    let userid=selfThis.data.userid
    let activityId=actionInfo.id
    selectList.activityId=activityId
    selectList.userId=userid
      var params = {
      url: "/scheduleRest/list",
      method: "GET",
      data:selectList,
      callBack: function(res) {
       if(res.data){ 
        let getmessage=res.data
        let index = 0;
        let anchorIndex = -1;
        for(let item of getmessage){
         let anchor=item.anchor
         if(anchor==1){
            anchorIndex = index;
         }
         let getDate=item.date
         let neyear=getDate.slice(0,4)
         let nemouth=getDate.slice(5,7)
         let neday=getDate.slice(8,10)
         item.newTime=neyear+'/'+nemouth+'/'+neday 
        let qpScheduleList=item.qpScheduleList
        for(let item of qpScheduleList){
          //时间
           let newstart=item.startTime
           let newend=item.endTime
           let newStrstart=newstart.slice(11,16)
           let newStrend=newend.slice(11,16)
           item.startTime=newStrstart
           item.endTime=newStrend
          //  console.log(qpScheduleList)
          //  console.log(item.timeType)
         }

         index++;
        } 
          selfThis.setData({
          listArry:getmessage,
          isOver:false
          }) 
          if(anchorIndex != -1){
              selfThis.setData({
                toView:anchorIndex
              });
          }
        
       }else{
        selfThis.setData({
          isOver:true
         })
       }
      },
    };
    http.request(params);
  }
})

3.