微信小程序踩坑之根据输入的值变换界面

实现根据输入的值变换界面的功能其实特简单，逻辑实现的代码也不多。这样只需要一个界面就可以展现更多的信息，避免界面过多，运行速度过慢。

话不多说，直接上干货。

1. WXML界面如下：

<view class="content">
<view wx:for="{{note}}" wx:key="index" wx:for-index="index" wx:for-item="item">
<view class="item">
<text class="item-id">{{item.id}}</text>
<image class="item-img" src="{{item.url}}" mode='widthFix'></image>
<text class="item-title">{{item.title}}</text> 
</view>
</view>
</view>

2. JS代码段如下：

const app = getApp()
let shuru="";
Page({

    /**
     * 页面的初始数据
     */
    data: {
      note:{},
      "5": [{
        id:1,
        title: '',
        url: '',
       },{
        id:2,
        title: '',
        url: '',
       },{
        id:3,
        title: '',
        url: '',
       },{
        id:4,
        title: '',
        url: '',
       },{
        id:5,
        title: '',
        url: '',
       },{
        id:6,
        title: '',
       },{
        id:7,
        title: '',
        url: '',
       }],
       "15": [{
        id:1,
        title: '',
        url: '',
       },{
        id:2,
        title: '',
        url: '',
       },{
        id:3,
        title: '',
        url: '',
       }],
      
       "25": [{
        id:'',
        title: '内容待更新......',
        url: '',
       }],
       "35": [{
        id:'',
        title: '内容待更新......',
        url: '',
       }],
       "45": [{
        id:'',
        title: '内容待更新......',
        url: '',
       }],
       "55": [{
        id:'',
        title: '内容待更新......',
        url: '',
       }],
       "65": [{
        id:'',
        title: '内容待更新......',
        url: '',
       }],
       "75": [{
        id:'',
        title: '内容待更新......',
        url: '',
       }],

    },

    
    /**
     * 生命周期函数--监听页面显示
     */
    onShow:function(){
        if(shuru==""){
          this.setData({
            note:this.data[5],
          })
        }else if(shuru==""){
          this.setData({
            note:this.data[15],
          })
        }else if(shuru==""){
          this.setData({
            note:this.data[25],
          })
        }else if(shuru==""){
          this.setData({
            note:this.data[35],
          })
        }else if(shuru==""){
          this.setData({
            note:this.data[45],
          })
        }else if(shuru==""){
          this.setData({
            note:this.data[55],
          })
        }else if(shuru==""){
          this.setData({
            note:this.data[65],
          })
        }else{
          this.setData({
            note:this.data[75],
          })
        }
      }
})

划重点，

(1)    data: { note:{},}，要在data里定义数组；

(2)    主要实现的代码，其实是note:this.data[ ]。

关注我，我是疯狂的豆包，带你体验疯狂的编程乐趣。