【微信小程序】根据菜单显示不同值

这里我做的是一级的，但其实2，3，4…只需要改变数组就可以了。

第一步：我先放一下效果图

为了节约大家的时间，这里我先放了实现效果，如果不是想要这种样式的可以直接划走，哈哈哈哈😂

这里是我做的简单的示例，这里主要是学习资料的选择，因为数据也是相对比较少的，所以下面我也说了，我采用的就是全前端的做法。对于数据多且变得肯定不推荐。

第二步：实现(代码部分）

这里我用的是全前端的实现，没有用后端,这里就会造成代码稍微多一点，运行效率稍微慢一点，但其实只要数据不多就可以用，但是数据多就不还是要用一些后端，对了不给负责给一些后端的同学加锅，我就用全前端的代码来实现

采用全前端形式，比较适合不变且小的数据。

2.1 wxml

第一次接触前端这个东西，觉得有点可爱(●’◡’●)，首先当然是从wxml做起

这里我先做一下代码的一些说明:

1. picker：从底部弹起的滚动选择器。
2. multiArray[0][multiIndex[0]]这里我写的是一级菜单，多级的其他博客也有很多，可以查查 (hhhhhh,可能会被喷，这里我主要是想写如何实现根据选择器显示不同的东西，其实你掌握最低级的，高级只是改个数据格式而已）
3. copy是为了实现长按复制

<view class="img_tip">
  <image class='tip_img' src='(这里放你自己想要的图片网址或项目文件的地址）' mode="aspectFill" ></image>
</view>

<view class="picker-box">
  <view class='skill-picker'>
    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
      <view class="skill-title">
        {{multiArray[0][multiIndex[0]]}}
      </view>
    </picker>
  </view>
  <view class="section_tc" >
      <view class='content' selectable='true' bindlongtap='copy'>{{content_zi}}</view>
  </view>
</view>

2.2 wxss
下面是相关的wxss代码

.tip_img{
  width: 100%;
  height: 120px;
  margin-top: 0px;
}

.picker-box {
  margin-top: 0px;
  width: 100%;
  top: 0;
}

.skill-picker {
  height: 80rpx;
  background-color: #96C158;
  box-shadow: 0rpx 5rpx 16rpx rgba(0, 0, 0, 0.05);
}

.content{
  margin-top: 15rpx;
  margin-left: 20px;
  margin-left: 15rpx;
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-line;
  color: rgb(125, 146, 222);
}

.skill-title {
  line-height: 80rpx;
  text-align: center;
  vertical-align: middle;
  color: white;
  font-size: 36rpx;
  font-weight: bold;
}

.section_tc{
  margin-top: 0rpx;
  width: 100%;
  height: 400rpx;
  border-image: fill;
  background-size: cover;
  background-position: center;
  background-image: url('这里放你自己想要文字区域的背景图');
}

2.3 js
下面是相关的js代码

这里下面用来非常笨的方法，没错就是if-else. 由于第一次接触前端这东西，希望快点完成作业，直接搬出简单粗暴的方法，还请多多见谅，博友们有其他方法，还希望可以多多交流，相互学习！！！

Page({
  /**
   * 页面的初始数据
   */
  data: {
    index: 0,
    multiArray: [ ['C++',
                  'C语言',
                  '大学计算机基础',
                  '大学英语',
                  '高等数学',
                  '军事理论',
                  '数学分析', 
                  '线性代数',]],
    multiIndex: [0],
    content_zi: "链接1 长按复制这段内容后打开百度网盘手机App，操作更方便哦",
  },

  bindMultiPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })

    if (e.detail.value == 0){
      this.setData({
        content_zi: "链接1 长按复制这段内容后打开百度网盘手机App，操作更方便哦"
      })
    }
    else{
      if (e.detail.value == 1) {
        this.setData({
          content_zi: "链接2 长按复制这段内容后打开百度网盘手机App，操作更方便哦"
        })
        
      } else {
        if (e.detail.value == 2) {
          this.setData({
            content_zi: "链接3 长按复制这段内容后打开百度网盘手机App，操作更方便哦"
          })
          
        } else {
          if (e.detail.value == 3) {
            this.setData({
              content_zi: "链接4 长按复制这段内容后打开百度网盘手机App，操作更方便哦"
            })
          } else {
            if (e.detail.value == 4) {
              this.setData({
                content_zi: "链接5 长按复制这段内容后打开百度网盘手机App，操作更方便哦"
              })
            } else {
              if (e.detail.value == 5) {
                this.setData({
                  content_zi: "链接6 长按复制这段内容后打开百度网盘手机App，操作更方便哦"
                })
              } else {
                if (e.detail.value == 6) {
                  this.setData({
                    content_zi: "链接7 长按复制这段内容后打开百度网盘手机App，操作更方便哦"
                  })
                } else {
                  this.setData({
                    content_zi: "链接8 长按复制这段内容后打开百度网盘手机App，操作更方便哦"
                  })
                }
              }
            }
          }
        }
      }
    }
  },


  bindMultiPickerColumnChange: function (e) {
    console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
    // 知道修改的列以后，就可以通过修改multiIndex中对应元素的值，然后再修改multiArray
  },

   /*** 长按复制*/
   copy: function () {
    var that = this;
    wx.setClipboardData({
      data: that.data.content_zi,
      success: function (res) {
        wx.showToast({
          title: '复制成功',
        });
      }
    });
  },
   
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

2.4 json
下面是相关json配置。

{
  "usingComponents": {},
  "navigationBarBackgroundColor":"这里选择你自己想要的颜色",
  "navigationBarTitleText": "学习资料",
  "navigationBarTextStyle":"black",
  "enablePullDownRefresh": true
}