小程序实现点击获取数据与侧边栏功能

页面结构（.wxml）

以下是用于展示侧边栏和获取点击数据的主要页面结构：

样式定义（.wxss）

page, .page {
  height: 100%;
  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Droid Sans Fallback', 'Microsoft Yachei', sans-serif;
}

.page-slidebar {
  height: 100%;
  width: 750rpx;
  position: fixed;
  right: 0;
  background-color: white;
  z-index: 0;
}

.page-content {
  padding-top: 60rpx;
  position: absolute;
  right: 0;
}

.wc {
  color: black;
  padding: 30rpx 0 30rpx 150rpx;
  border-bottom: 1px solid #eee;
}

.c-state {
  transform: rotate(0deg) scale(1) translate(60%, 0%);
  -webkit-transform: rotate(0deg) scale(1) translate(-60%, 0%);
}

.page-top {
  height: 100%;
  position: fixed;
  width: 750rpx;
  background-color: white;
  z-index: 0;
  transition: All 0.4s ease;
  -webkit-transition: All 0.4s ease;
}

.cover {
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.5;
  z-index: 9000;
}

.content {
  margin-top: 100rpx;
}

.mainInput {
  color: black;
  padding: 30rpx 0 30rpx 150rpx;
  border: 2px solid gray;
  width: 500rpx;
}

逻辑处理（.js）

Page({
  data: {
    isOpen: false,
    mark: 0,
    array: ["李知恩", "霍建华", "杨幂", "迪丽热巴", "古力娜扎"],
    newMark: 0,
    isRight: true,
    currentValue: ""
  },
  toggleSidebar: function(e) {
    this.setData({
      isOpen: !this.data.isOpen
    });
  },
  handleStart: function(e) {
    this.data.mark = this.data.newMark = e.touches[0].pageX;
  },
  handleDrag: function(e) {
    this.data.newMark = e.touches[0].pageX;
    if (this.data.mark       this.isRight = true;
    } else if (this.data.mark > this.data.newMark) {
      this.isRight = false;
    }
    this.data.mark = this.data.newMark;
  },
  handleEnd: function(e) {
    this.data.mark = 0;
    this.data.newMark = 0;
    if (this.isRight) {
      this.setData({
        isOpen: true
      });
    } else {
      this.setData({
        isOpen: false
      });
    }
  },
  handleClick: function(e) {
    const value = e.currentTarget.dataset.value;
    console.log("Selected value:", value);
    const index = this.data.array.indexOf(value);
    this.setData({
      isOpen: false,
      currentValue: value
    });
  }
});