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

完成效果如上图

首先我们要在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;
        // 获取可使用窗口高度
        let clientWidth = res.windowWidth;
        // 算出比例
        let ratio = 750 / clientWidth;
        // 算出高度(单位rpx)
        let height = clientHeight * ratio;
        // 设置高度
        tempHeight = height;
      },
      fail: function(res) {},
      complete: function(res) {},
    })

    that.setData({
      screenHeight: tempHeight
    })

    this.getCurseList();
  },
//获取左侧分类列表
  getCurseList: function() {
    var that = this;
    wx.request({
      url: app.globalData.baseUrl + '/navi/json',
      data: '',
      header: {},
      method: 'GET',
      dataType: 'json',
      responseType: 'text',
      success: function(res) {

        that.setData({
          courselist: res.data.data
        })


        console.log(res.data)
      },
      fail: function(res) {},
      complete: function(res) {},
    })

  },
  //点击左侧分类列表，切换选中项 更改数据
  choosetype: function(event) {
    console.log(event.currentTarget.id)
    this.setData({
      currentTab: event.currentTarget.id
    })
  }

这里要注意一下scroll-view的高度，我们是获取到屏幕的rpx高度然后进行赋值操作 height:{{screenHeight}}rpx; 格式和单位要写正确

json数据格式：微信小程序实现左侧list滑动点击更换数据功能
最终完成效果：
点击左侧 scroll-view数据列右侧的数据表相对应的的item会滑动到顶部
这里主要使用了scroll-view的属性scroll-into-view来实现上述效果，使用方法在小程序文档中有介绍
这里我给右侧每一个item的标签view设置id属性为id=“data{{index}}”（例右侧第一个item的id为 data0）
然后左侧列表的点击事件传递当前是点击的哪个item并把当前的index传递到js文件，js中拿到index赋值给scroll-into-view的值toview为当前点击item的id（例当前点击的是第一个item 则赋值给toview的值为data0）
此时scroll-into-view的toview值为data0 ，则会去对应id为data0的item 并滑动到顶部，以上效果就完成了
下面是完成整体流程的代码，备注很详细，开放接口和数据源本文都有介绍可以自己动手实现一下

最终wxml：

<view class="course">
  <!--左侧List-->

  <view class='leftView'>

    <scroll-view scroll-y="true" style='height:{{screenHeight}}rpx; '>
      <view class='toptyperow'>
        <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 class='rightView' style='height:{{screenHeight}}rpx; '>
    <!--设置scroll-view 的scroll-into-view值为 toview，点击左侧list之后会给这个toview根据currentTab赋值然后scroll-view就会滑动到相应位置-->
    <scroll-view scroll-y="true" style='height:{{screenHeight}}rpx;' scroll-into-view="{{toview}}">
      <!--双重for循环-->
      <block wx:for="{{courselist}}">
        <!--设置id 目的是给item赋值id参数使得scroll-view根据这个值进行滑动-->
        <view class='rightItem' id="date{{index}}">
          <!--标题-->
          <text class='itemName'>{{item.name}}</text>
          <!--标题下面的数据更改一个for循环的名字 wx:for-index 循环item的articles数据拿到 title-->
          <view class='rightItemIn'>
            <block wx:for="{{item.articles}}" wx:for-index="idx" wx:for-item="itemName">
              <text class='itemNameIn'>{{itemName.title}}</text>
            </block>
          </view>
        </view>
      </block>

    </scroll-view>

  </view>

</view>

最终js：

var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    courselist: [],
    screenHeight: 0,
    currentTab: 0,
    toview: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this
    var tempHeight = 0
    wx.getSystemInfo({
      success: function(res) {
        // 获取可使用窗口宽度
        let clientHeight = res.windowHeight;
        // 获取可使用窗口高度
        let clientWidth = res.windowWidth;
        // 算出比例
        let ratio = 750 / clientWidth;
        // 算出高度(单位rpx)
        let height = clientHeight * ratio;
        // 设置高度
        tempHeight = height;
      },
      fail: function(res) {},
      complete: function(res) {},
    })

    that.setData({
      screenHeight: tempHeight
    })

 


    this.getCurseList();
  },

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

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

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

  },

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

  },

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

  },

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

  },

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

  },
  //获取左侧分类列表
  getCurseList: function() {
    var that = this;
    wx.request({
      url: app.globalData.baseUrl + '/navi/json',
      data: '',
      header: {},
      method: 'GET',
      dataType: 'json',
      responseType: 'text',
      success: function(res) {

        that.setData({
          courselist: res.data.data,
          rightCourseTitle: res.data.data.articles

        })


        console.log(res.data)
      },
      fail: function(res) {},
      complete: function(res) {},
    })

  },
  //点击左侧分类列表，切换选中项 更改数据
  choosetype: function(event) {
    console.log(event.currentTarget.id)
    this.setData({
      currentTab: event.currentTarget.id
    })
    this.setData({
      toview: "date" + event.currentTarget.id
    })
  }
})

最终wxss样式：



::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.course {
  display: flex;
  flex-direction: row;
}


.leftView {
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.rightView {
  margin-left: 10rpx;
  width: 70%;
  height: 1000rpx;
  display: flex;
  flex-direction: column;
}

.coursetitleno {
  height: 70rpx;
  width: 100%;
  font-size: 14px;
  text-align: center;
  color: #2996cd;
  align-self: center;
  flex-grow: 1;
  background-color: #fff;
  padding: 10px;
}

.coursetitlese {
  width: 100%;
  font-size: 14px;
  align-self: center;
  height: 70rpx;
  text-align: center;
  color: #000;
  flex-grow: 1;
  background-color: #eee;
  padding: 10px;
}

.leftitem {
  display: flex;
  flex-direction: column;
}

.toptyperow {
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
  background-color: #f5f5f5;
  padding-bottom: 2px;
}

.rightItem {
  display: flex;
  flex-direction: column;
}

.rightItemIn {
  display: flex;
  padding: 10rpx;
  flex-direction: row;
  flex-wrap: wrap;
}

.itemName {
  margin-bottom: 10px;
  margin-top: 10px;
  margin-left: 10rpx;
  color: #295226;
  font-size: 18px;
}

.itemNameIn {
  margin-left: 15rpx;
  color: #545139;
  font-size: 14px;
  padding: 10rpx;
  background: #f5f5f5;
  margin: 10rpx;
  border-radius: 22rpx;
}

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

完成效果如上图

最终wxml：

最终js：

最终wxss样式：

相关推荐