微信小程序左右导航联动加顶部

发布于：2022-04-30 22:53:40  栏目：技术文档

html代码

<view class="VerticalBox">
          <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation scroll-top="{{VerticalNavTop}}" style="height:calc(100vh)"><!-- 如果顶部有内容100vh-顶部高rpx -->
            <view class="cu-item  {{index==TabCur?'text-coffee cur':''}}" wx:for="{{publicitylist}}" wx:key="index" bindtap='tabSelect' data-id="{{index}}">
             {{item.theme}}
            </view>
          </scroll-view>
          <scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh)" scroll-into-view="main-{{MainCur}}" bindscroll="VerticalMain"><!-- 如果顶部有内容100vh-顶部高rpx -->
          <view class="padding-lr-sm padding-top-sm" wx:for="{{publicitylist}}" wx:for-item="themelist" wx:key="index" id="main-{{index}}">
            <view class="text-black shadow bg-white">
              <view class='padding-sm solid-bottom bg-white text-coffee text-xl text-bold'>
                <view class='action'>
                  {{themelist.theme}} </view>
              </view>
              <block wx:for="{{themelist.list}}" wx:for-item="minglist" wx:key="index">
                <view class='padding-sm bg-white text-black solid-bottom' bindtap="goarticle">
                  <view class="text-black" style="font-size: 30rpx;">{{minglist.drugname}}</view>
                  <view class="text-doublecut margin-tb-xs">{{minglist.title}}</view>
                  <view class="text-sm text-grey bg-white"><block wx:if="{{minglist.fullname}}">{{minglist.fullname}}｜</block>名医名方</view>
                </view>
              </block>
            </view>
          </view>
          <view style="padding-top: 400rpx;"></view>
          </scroll-view>
        </view>

js代码

data: {
    TabCur: 0,//左边导航默认位置
    MainCur: 0,//右边导航默认位置
    VerticalNavTop: 0,//列表默认高度
    load: true,//右边导航滑动定位左边
    publicitylist:[//每个数据给个id用于右边导航给左边定位
      {
        id:0,
        theme:'名医名方',
        list:[
          {drugname:'1资生汤',title:'由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨123456',fullname:'王会书'},
          {drugname:'1资生汤2',title:'由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨123456',fullname:''},
          {drugname:'1资生汤3',title:'由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨123456',fullname:'王会书2'},
          {drugname:'1资生汤4',title:'由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨123456',fullname:'王会书2'},
        ]
    },
      {
        id:1,
        theme:'授课手书',
        list:[
          {drugname:'2资生汤',title:'由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨123456',fullname:'王会书'},
          {drugname:'2资生汤2',title:'由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨123456',fullname:'王会书2'},
          {drugname:'2资生汤3',title:'由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨123456',fullname:'王会书2'},
          {drugname:'2资生汤4',title:'由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨123456',fullname:'王会书2'},
        ]
    },
      {
        id:2,
        theme:'临证医案',
        list:[
          {drugname:'3资生汤',title:'由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨123456',fullname:'王会书'},
          {drugname:'3资生汤2',title:'由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨123456',fullname:'王会书2'},
          {drugname:'3资生汤3',title:'由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨123456',fullname:'王会书2'},
          {drugname:'3资生汤4',title:'由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨123456',fullname:'王会书2'},
        ]
    },
      {
        id:3,
        theme:'手书',
        list:[
          {drugname:'3资生汤',title:'由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨123456',fullname:'王会书'},
          {drugname:'3资生汤2',title:'由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨123456',fullname:'王会书2'},
          {drugname:'3资生汤3',title:'由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨123456',fullname:'王会书2'},
          {drugname:'3资生汤4',title:'由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨123456',fullname:'王会书2'},
        ]
    },
    ],
  },
    tabSelect(e) {//左边导航按钮
    this.setData({
      TabCur: e.currentTarget.dataset.id,
      MainCur: e.currentTarget.dataset.id,
      VerticalNavTop: (e.currentTarget.dataset.id - 1) * 50//左边导航内容距离顶部位置
    })
  },
  VerticalMain(e) {//右边导航滑动事件
    let that = this;
    let list = this.data.publicitylist;
    let tabHeight = 0;
    if (this.data.load) {
      for (let i = 0; i < list.length; i++) {
        let view = wx.createSelectorQuery().select("#main-" + list[i].id);
        view.fields({
          size: true
        }, res => {
          list[i].top = tabHeight;
          tabHeight = tabHeight + res.height;
          list[i].bottom = tabHeight;     
        }).exec();
      }
      that.setData({
        load: false,
        publicitylist: list
      })
    }
    let scrollTop = e.detail.scrollTop + 20;
    for (let i = 0; i < list.length; i++) {
      if (scrollTop > list[i].top && scrollTop < list[i].bottom) {console.log();
        that.setData({
          VerticalNavTop: (list[i].id - 1) * 50,//左边导航内容距离顶部位置
          TabCur: list[i].id
        })
        return false
      }
    }
  },

css代码

/* 下面是左边的导航代码，右边的导航内容可以直接写 */
.VerticalNav.nav {
  width: 200rpx;
  white-space: initial;
}
.VerticalNav.nav .cu-item {
  width: 100%;
  text-align: center;
  background-color: #fff;
  margin: 0;
  border: none;
  height: 100rpx;
  line-height: 100rpx;
  position: relative;
}
.VerticalNav.nav .cu-item.cur {
  background-color: #f1f1f1;
}
.VerticalNav.nav .cu-item.cur::after {
  content: "";
  width: 8rpx;
  height: 30rpx;
  border-radius: 10rpx 0 0 10rpx;
  position: absolute;
  background-color: currentColor;
  top: 0;
  right: 0rpx;
  bottom: 0;
  margin: auto;
}
.VerticalBox{
  display: flex;
}
.VerticalMain{
  background-color: #f1f1f1;
}

相关推荐