微信小程序实现左侧list滑动点击更换数据功能

最新推荐文章于 2025-06-04 13:25:52 发布

原创

最新推荐文章于 2025-06-04 13:25:52 发布 · 5.8k 阅读

10 ·

CC 4.0 BY-SA版权

在这里插入图片描述

完成效果如上图

首先我们要在wxml中完成布局
左侧为一个可以上下滑动的list 宽度占屏幕的30%，右侧为显示相关数据的页面，宽度占屏幕的70%

<view class="course">
   <!--左侧view布局-->
  <view class='leftView'>
    <scroll-view scroll-y="true" style='height:{
  
  {screenHeight}}rpx; '>
      <view class='toptyperow'>
         <!--循环数据源列出数据项 并通过index确定是都选中更改样式-->
        <block wx:for="{
  
  {courselist}}" class="leftitem">
          <!--标签文字利用当前tab和for循环的item进行比较，当前tab=item的index则是选中的-->
          <text class="{
  
  {currentTab == index ?'coursetitleno':'coursetitlese'}}" id='{
  
  {index}}' bindtap='choosetype'>{
  
  {item.name}}</text>
        </block>
      </view>
    </scroll-view>
  </view>
     <!--右侧view布局，这里只是设置了高度，上图红色部分，在view里可以进行数据的展示 这里没写可自行实现-->
  <view class='rightView' style='height:{
  
  {screenHeight}}rpx; '>
  <!--在此处显示切换之后的数据显示-->
  </view>
</view>

js文件中定义三个数据-> 数据源courselist, 屏幕高度screenHeight ，当前选中项currentTab
在onLoad方法中执行数据请求接口获取数据赋值给courselist，同时获取屏幕的高度并将单位转化为rpx
重写点击choosetype方法将当前选中项赋值给currentTab则页面的选中效果就会发生改变
这里使用的是开放API获取数据 https://www.wanandroid.com/navi/json

 /**
   * 页面的初始数据
   */
  data: {
    courselist: [],
    screenHeight: 0,
    currentTab: 0,
  },
/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that=this
    var tempHeight = 0
    wx.getSystemInfo({
      success: function(res) {
        // 获取可使用窗口宽度
        let clientHeight = res.windowHeight;
        // 获取可