❤ ❤微信小程序：数据库查询实现导航栏切换❤ ❤

最新推荐文章于 2024-03-26 14:41:51 发布

小兔崽啊啊啊

最新推荐文章于 2024-03-26 14:41:51 发布

阅读量888

点赞数

文章标签：云开发小程序

本文链接：https://blog.csdn.net/yingshuangtu/article/details/118929656

版权

实现原理：

一、实现情况

在这里插入图片描述

二、实现思路

1.数据库的查询

页面展现的图片以及文字均为从云开发控制台数据库中获取的数据，实现的基础为对数据库的查询，
在这里插入图片描述

实现思路 ：给每一个数据集中的每一个记录添加一个标签，我给标签命名为a,通过标签进行分类，点击到第一个按钮页面出现的数据为“a”:"0"的记录，点击第二个按钮页面出现的数据为“a”:"1"的记录，点击第三个按钮页面出现的数据为“a”:"2"d 记录…,以上，就实现了点击nav导航栏按钮可以切换不同的数据
在这里插入图片描述

我设置的标签为a(id为自动生成，src为图片路径，我设置的为其相对路径，title为文字内容)

在这里插入图片描述
js代码

// 导航栏数据切换
toggle(e){
  // 点击中，加入类active
  this.setData({
    "active":e.target.dataset.index
  })
  var _this=this;
  // 获取索引值
  console.log(e.target.dataset.index);
  db.collection('yc_list').where({
    a:e.target.dataset.index.toString()
 
  })
  .get({
    success: function(res) {
      // res.data 是包含以上定义的两条记录的数组
      console.log(res.data)
       _this.setData({
         "yc_list":res.data
       })
    }
  })
},
// /**
//    * 生命周期函数--监听页面加载
//    */
  onLoad(){//此处接收传递过来的参数wx.navigateTo跳转时传递的参数
    var _this=this;
    db.collection('yc_list').where({
      a:"0"
   
    })
    .get({
      success: function(res) {
        // res.data 是包含以上定义的两条记录的数组
        console.log(res.data)
        
         _this.setData({
           "yc_list":res.data
         })
      }
    })

更具体的对小程序云存储的数据库的增删查改可以查看微信开放文档
微信开发文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

在这里插入图片描述

1.wx:for循环

导航标签写在js中，使用wx:for循环出导航标签，
在这里插入图片描述

2.js中设置鼠标点击事件，点击添加类active改变导航标签样式，事件使用bindtap绑定

js代码

// 导航栏数据切换
toggle(e){
  // 点击中，加入类active
  this.setData({
    "active":e.target.dataset.index
  })

wxml代码

 <view wx:for="{{button}}">
    <!-- 谁被点中谁就添加btn属性 -->
    <text class="{{active==index?'btn':''}} nav_item" bindtap="toggle" data-index="{{index}}">{{item}}</text>
  </view>

js代码

实现结果
在这里插入图片描述

js中标签数据增加增加，导航标签相应会动态添加增加

3.自定义属性data-

自定义属性语法以data-开头：我们使用 data-* 属性来嵌入自定义数据。也就是说这个data-*是可以用来存储数据的，data-的后面紧跟自己起的一个变量名，然后后面赋予一个值，这个值就会被存储起来。然后获取数据通过js来实现。

 <view wx:for="{{button}}">
    <!-- 谁被点中谁就添加btn属性 -->
    <text class="{{active==index?'btn':''}} nav_item" bindtap="toggle" data-index="{{index}}">{{item}}</text>
  </view>

以上代码中data-index绑定js中变量index，当导航栏点击中的下标值等于index时，该index就添加类btn

三、全部代码

yuncun.wxml


	<image class="slide_btn" bindtap="onChange"  src="../../yc_img/yc_gengduo.png"></image>

	<view class="yc_header">
  <view class="container">
   <navigator url="/pages/yuncun/yunquan/yunquan" class="navigate1">
		<view class="header_title1">云圈</view>
	</navigator>
	<navigator url="/pages/yuncun/daren/daren" class="navigator2">
		<view class="header_title2">达人</view>
	</navigator>
    
    <image src="../../yc_img/yc_tianjia.png" class="yc_header_r"></image>
  </view>
</view> 
 <!--头部结束，进入主要内容部分  -->
 <!-- 搜索框 -->
 
 <view class="container">
	<navigator  url="/pages/yuncun/yc_search/yc_search">
		<view class="yc_search">
			<image src="../../yc_img/yc_sousuo.png"></image>
			<text>哪些歌词长大后才真的看懂？</text>
			
		</view>
	</navigator>
</view> 

	<!---------------导航栏 -->
<view class="container">
	<view class="nav">
  <view wx:for="{{button}}">
    <!-- 谁被点中谁就添加btn属性 -->
    <text class="{{active==index?'btn':'nav_item'}}" bindtap="toggle" data-index="{{index}}">{{item.text}}</text>
  </view>
</view>
</view>
	<!-- ----------中间视频部分 ------------>
<view class="main">
	<view class="container">
<view class="list">
		<view wx:for="{{yc_list}}" wx:key="key" class="list_box">
			<view class="list_box_top">
				<!-- 传值 -->
				<navigator url="/pages/yuncun/yuncun_detail/yuncun_detail?src={{item.src}}&title={{item.title}}&title2={{item.title2}}" open-type="navigate" class="detail">
				<image src="{{item.src}}" class="img" mode="widthFix"></image>
				
				</navigator>
				
			</view>
			<text class="box_title1">{{item.title}}</text>
			<text class="box_title2">{{item.title2}}</text>
		</view>
	</view> 
</view>


<!-- -----------侧边栏----------- -->
<view class="sidebar {{open?'show':''}}">
	<view class="container">
	<!-- 头像部分 -->
		<view class="slidebar_top">
			<image src="../../yc_img/yuncun_youxiang.png" alt="" class="yc_touxiang"></image>
			<text>用户12345678 ></text>
		</view>
	<!-- vip -->
		<image mode="widthFix" class="slidbar_vip" src="../../yc_img/slidebar_vip.png"></image>
	<!-- 各种item -->
    <view class="wc" wx:for="{{yc_left_item}}"  wx:key="key">
		
				<image src="{{item.src}}"></image>
				<text>{{item.text}}</text>
      
    </view>
	</view>
</view>

<!-- 遮罩 -->
<view class="sidebar-shade" style="display:{{open?'block':''}}" bindtap="onChange">
</view>
</view>

yuncun.js

// 获取应用实例
const app=getApp()
wx.cloud.init()
// 初始化数据库
const db=wx.cloud.database()
Page({ 
  data: {
    open: false,

    current:0,
    newslist:[{
        text:'999'
      },{
        text:'这是分类界面内容'
      },{
        text:'这是发现界面内容'
      },{
        text:'这是收藏界面内容'
      },{
        text:'这是我的界面内容'
      }
    ],
    // 侧边
    yc_left_item:[
      {src:"../../yc_img/yc_xin.png", text:"我的消息"},
      {src:"../../yc_img/yc_beik.png",text:"云贝中心"},
      {src:"../../yc_img/yc_deng.png",text:"创作者中心"},
      {src:"../../yc_img/yc_piao.png",text:"云村有票"},
      {src:"../../yc_img/yc_gouwuc.png",text:"商城"},
      {src:"../../yc_img/yc_youxi.png",text:"游戏专区"},
      {src:"../../yc_img/yc_cailing.png",text:"口袋铃铛"},
      {src:"../../yc_img/yc_shezhi.png",text:"设置"},],
      // 中间视频部分
      newslist:[
      //   {
      //   detail:[{src:"../img/yc1.jpg",},{src:"../img/yc1.jpg",},{ src:"../img/yc3.png",},{src:"../img/yc4.png"}]
      // }, 
     {
        src:"../../yc_img/iu1.png", 

      },
       {
        src:"../../yc_img/iu2.png",
      },
      
    ],
     // 确认谁被点中的变量
     active:0,
     yc_list:[{
       src:"../../yc_img/wyb1.png",
       title:"这是原来数据",
       price:"$55"
     },
     {
       src:"../../yc_img/wyb2.png",
       title:"这是原来数据",
       price:"$99"
     }
   ],
   // button
   button:[{text:"广场"},{text:"宝藏音乐"},{text:"超燃现场"},
   {text:"演唱演奏"},{text:"MV"}]
    },
    
   
    // 
    onClick:function(event){
      var index = event.currentTarget.dataset.id;
      this.setData({
        current:index
      })
    },
    onChange(e) {
      var that = this;
      that.setData({
        open: !that.data.open
      })
    },
// 导航栏数据切换
toggle(e){
  // 点击中，加入类active
  this.setData({
    "active":e.target.dataset.index
  })
  var _this=this;
  // 获取索引值
  console.log(e.target.dataset.index);
  db.collection('yc_list').where({
    a:e.target.dataset.index.toString()
 
  })
  .get({
    success: function(res) {
      // res.data 是包含以上定义的两条记录的数组
      console.log(res.data)
       _this.setData({
         "yc_list":res.data
       })
    }
  })
},
// /**
//    * 生命周期函数--监听页面加载
//    */
  onLoad(){//此处接收传递过来的参数wx.navigateTo跳转时传递的参数
    var _this=this;
    db.collection('yc_list').where({
      a:"0"
   
    })
    .get({
      success: function(res) {
        // res.data 是包含以上定义的两条记录的数组
        console.log(res.data)
        
         _this.setData({
           "yc_list":res.data
         })
      }
    })
    
    //如果要在页面中使用
    
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

yuncuun.wxss

.btn{
 
  font-size: 16px;
  color: red;
  padding:3px 11px;
  border-radius: 20px 15px 15px 15px;
  line-height: 50rpx;
  text-align: center;
  float:left;margin-right:5px;background-color:rgb(252, 216, 222);
}
.container{
  margin-left:13px;margin-right: 13px;
}
/* 侧边栏按钮 */
.slide_btn{z-index: 100;position: absolute;top:7px;left:13px;
  width: 31px;height: 31px;
}
/*侧边栏*/
.sidebar {z-index: 500;
  background: #f5f5f5;
  box-shadow: 4rpx 4rpx 12px rgba(0,0,0,.3);
  display: block;
  font-size: 16px;
  font-weight: 400;
  height: 100%;
  left: 0;
  position: fixed;
  overflow: auto;
  transform: translate(-600rpx,0);
  transition: transform .3s;
  top: 0;
  width: 600rpx;
  z-index: 100;
}
.sidebar.show {
  transform: translate(0,0);
}
.sidebar-shade {
  background: rgba(0,0,0,.3);
  display: none;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 99;
}
/* 每一个侧边item */
.wc {position: relative;
  color:black;
  padding: 30rpx 0 30rpx 150rpx;
  border-bottom: 1px solid #eee; margin-left:13px;
  width: 73%;
}
.wc>image{position: absolute;top:17px;left:40px;
  width: 20px;height: 20px;
}
.wc text:hover{
color: red;
}
/* 头像 */
.slidebar_top{position: relative;
  width: 100%;height: 40px;}
.slidebar_top>text{padding-left: 65px;
  line-height: 40px;text-align: center;
}
.yc_touxiang{position: absolute;top:2px;left:15px;
width: 35px;height: 35px;border-radius: 50%;
}
.slidbar_vip{
  width: 73%;margin:15px 13px;
}


/* 导航栏 */
.nav{position: relative;height: 37px;background-color: #fff;
  margin-top:12px;overflow: hidden;
  width: 100%;

  /* background-color: skyblue; */
  
  
}

.nav_item{
  font-size: 16px;
  color: #7e7e7e;
  padding:3px 11px;
  border-radius: 20px 15px 15px 15px;
  line-height: 50rpx;
  text-align: center;
  float:left;margin-right:5px;background-color:#eeeeee;
} 
/* .nav_item{float: left;} */

.active{
  background-color: #f1eeef;color: #fc3a38;
  border-radius:15px 15px 15px 15px;
}
/* -------------main部分开始--------------- */
.main{
  width: 100%;background-color: #d4b2ad;
}
.list{position: relative;
  margin-top:10px;
  width: 100%;
  height:1000px;
 
}


.list_box{margin-top:10px; margin-left:10px;background-color: #fff;
  border-radius: 10px;
  width: 46%;height: 23%;float: left;overflow: hidden;
}
.list_box_top{border-radius: 10px 10px 0 0;
  width: 100%;height: 77%;
 overflow: hidden;
}
.detail>image{
  width: 100%;
}
.box_title1{
  color:#000000;padding:5px 0 0 7px;
  font-size: 13px;z-index: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

}
.box_title2{padding-left:7px;display: block;
  font-size: 11px;color:#999999;margin-top:5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

}
.box_title1_icon{margin-left:10px;
  width: 10px;height: 10px;
}
/* ---------------导航栏---------------- */
.yc_header{position: relative;
  width: 100%;height: 40px;

}
.yc_header_l{float: left;
  width: 30px;height: 30px;
}
.yc_header .container .yc_header_r{position: absolute;top:5px;right: 13px;
  width: 30px;height: 30px;
}
.header_title1{
  position: absolute;top:0;left:33%;
  font-size: 18px;
  line-height: 36px;text-align: center;
  color:#7d7d7d;font-weight: 700;
}
.header_title2{position: absolute;top:0;right:34%;
  font-size: 18px;
  line-height: 36px;text-align: center;
  color:#7d7d7d;font-weight: 700;
}
.header_title2:hover,.header_title1:active{
  color: #000000;text-decoration:underline;
  text-decoration-color: #f54843;font-weight: 800;
 
}
/* 搜索框 */
.yc_search{clear: both;position: relative;
 
  width: 100%; height: 36px;background-color: #ededed;
border-radius: 15px 15px 15px 15px;
}
.yc_search image{position: absolute;top:8px;
  margin-left: 21%;
  width: 20px;height: 20px;
}
.yc_search text{
  line-height: 36px;text-align: center;padding-left:30%;
  color:#979797;font-size: 14px;
}
.navigate1,.navigate2{
  width: 60px;height: 30px;
}

四、json文件

文件名称
yc_list

{"_id":"ed449fd760e13c4700026f47373e235d","src":"../../yc_img/iu1.png","src2":"../../yc_img/iu2.png","src3":"../../yc_img/iu3.png","src4":"../../yc_img/iu4.png","title":"iu史诗级现场","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"0","video":"http://www.w3school.com.cn//i/movie.mp4","title2":"IU演唱会2019 TourConcert "}
{"_id":"ed449fd760e13c4700026f486895c8df","src":"../../yc_img/xzq1.png","src2":"../../yc_img/xzq2.png","src3":"../../yc_img/xzq3.png","src4":"../../yc_img/xzq4.png","title":"薛之谦新歌《被人》","price":"￥4444","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"0","video":"http://www.w3school.com.cn//i/movie.mp4","title2":"我们不擅长好言相劝"}
{"_id":"ed449fd760e13c4700026f4954d5f75e","src":"../../yc_img/cy1.png","src2":"../../yc_img/cy2.png","src3":"../../yc_img/cy3.png","src4":"../../yc_img/cy5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"0","video":"http://www.w3school.com.cn//i/movie.mp4","title":"初音未来宣传片","title2":"2016中国演唱会宣传片"}
{"_id":"ed449fd760e13c4700026f4a480253ec","src":"../../yc_img/EXO2.png","src2":"../../yc_img/EXO1.png","src3":"../../yc_img/EXO3.png","src4":"../../yc_img/EXO5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"0","video":["4-1","4-2","4-3"],"title2":"EXO五巡回演唱会《叫我》","title":"EXO巡回演唱会"}
{"_id":"0bd0c4ad60e2d041019b8d0c72c08dff","src":"../../yc_img/wyb1.png","src2":"../../yc_img/wyb2.png","src3":"../../yc_img/wyb3.png","src4":"../../yc_img/wyb5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"0","title2":"首唱live,帅惨啦~","title":"王一博最新单曲"}
{"_id":"0bd0c4ad60e2d041019b8d0d2e31ddd4","src":"../../yc_img/js1.png","src2":"../../yc_img/js2.png","src3":"../../yc_img/js3.png","src4":"../../yc_img/js5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"0","title2":"星月神话现场，女神还是那么美~","title":"金沙"}
{"_id":"0bd0c4ad60e2d041019b8d0e6eedcd25","src":"../../yc_img/zjq1.png","src2":"../../yc_img/zjq2.png","src3":"../../yc_img/zjq3.png","src4":"../../yc_img/zjq5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"1","title2":"早期练习室版本","title":"周洁琼女神"}
{"_id":"0bd0c4ad60e2d041019b8d0f5f9f07ee","src":"../../yc_img/cx1.png","src2":"../../yc_img/cx2.png","src3":"../../yc_img/cx3.png","src4":"../../yc_img/cx5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"1","title2":"《24K》舞台纯享","title":"宇宙少女程潇"}
{"_id":"0bd0c4ad60e2d041019b8d10069d135c","src":"../../yc_img/cxk1.png","src2":"../../yc_img/cxk2.png","src3":"../../yc_img/cxk3.png","src4":"../../yc_img/cxk5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"1","title2":"蔡徐坤YOUNG","title":"期待你的收听"}
{"_id":"0bd0c4ad60e2d041019b8d11682825fd","src":"../../yc_img/cxk2.png","src2":"../../yc_img/cxk1.png","src3":"../../yc_img/cxk3.png","src4":"../../yc_img/cxk5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"1","title2":"蔡徐坤YOUNG","title":"期待你的收听"}
{"_id":"0bd0c4ad60e2d041019b8d122ef30aa0","src":"../../yc_img/tl3.png","src2":"../../yc_img/tl2.png","src3":"../../yc_img/tl3.png","src4":"../../yc_img/tl5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"1","title2":"梅梅","title":"期待你的收听"}
{"_id":"0bd0c4ad60e2d041019b8d132643786e","src":"../../yc_img/tl1.png","src2":"../../yc_img/tl2.png","src3":"../../yc_img/tl3.png","src4":"../../yc_img/tl5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"1","title2":"泰勒","title":"期待你的收听"}
{"_id":"0bd0c4ad60e2d041019b8d145dfda3af","src":"../../yc_img/wyf3.png","src2":"../../yc_img/wyf2.png","src3":"../../yc_img/wyf1.png","src4":"../../yc_img/wyf5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"1","title2":"吴亦凡","title":"国风《端午奇妙之夜》"}
{"_id":"0bd0c4ad60e2d041019b8d1577a3b833","src":"../../yc_img/zjq3.png","src2":"../../yc_img/zjq2.png","src3":"../../yc_img/zjq1.png","src4":"../../yc_img/zjq5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"1","title2":"周洁琼","title":"二次元美少女"}
{"_id":"0bd0c4ad60e2d041019b8d1653b03e72","src":"../../yc_img/tl2.png","src2":"../../yc_img/tl1.png","src3":"../../yc_img/tl3.png","src4":"../../yc_img/tl5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"2","title2":"泰勒","title":"期待你的收听"}
{"_id":"0bd0c4ad60e2d041019b8d1708fa64c1","src":"../../yc_img/wje3.png","src2":"../../yc_img/wje2.png","src3":"../../yc_img/wje1.png","src4":"../../yc_img/wje5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"2","title2":"蔡徐坤YOUNG","title":"期待你的收听"}
{"_id":"0bd0c4ad60e2d041019b8d187668321d","src":"../../yc_img/lh1.png","src2":"../../yc_img/lh2.png","src3":"../../yc_img/lh3.png","src4":"../../yc_img/lh5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"2","title2":"鹿晗","title":"超级冠军Football Game"}
{"_id":"0bd0c4ad60e2d041019b8d193a8bdd38","src":"../../yc_img/wyf1.png","src2":"../../yc_img/wyf2.png","src3":"../../yc_img/wyf3.png","src4":"../../yc_img/wyf5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"2","title2":"吴亦凡","title":"期待你的收听"}
{"_id":"0bd0c4ad60e2d041019b8d1a7fdf400c","src":"../../yc_img/wje1.png","src2":"../../yc_img/wje2.png","src3":"../../yc_img/wje3.png","src4":"../../yc_img/wje5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"2","title2":"王嘉尔","title":"期待你的收听"}
{"_id":"0bd0c4ad60e2d041019b8d1b0a442576","src":"../../yc_img/lh5.png","src2":"../../yc_img/lh2.png","src3":"../../yc_img/lh3.png","src4":"../../yc_img/lh5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"3","title2":"《you song》新曲发布快来听听吧","title":"鹿晗"}
{"_id":"0bd0c4ad60e2d041019b8d1c5adeb1a7","src":"../../yc_img/zjq2.png","src2":"../../yc_img/zjq1.png","src3":"../../yc_img/zjq3.png","src4":"../../yc_img/zjq5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"3","title2":"周洁琼","title":"人间芭比精致五官"}
{"_id":"0bd0c4ad60e2d041019b8d1d7082367d","src":"../../yc_img/cx2.png","src2":"../../yc_img/cx1.png","src3":"../../yc_img/cx3.png","src4":"../../yc_img/cx5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"3","title2":"程潇","title":"韩国回来后颜值超高"}
{"_id":"0bd0c4ad60e2d041019b8d1e460b0942","src":"../../yc_img/js2.png","src2":"../../yc_img/js1.png","src3":"../../yc_img/js3.png","src4":"../../yc_img/js5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"3","title2":"金沙姐姐","title":"期待你的收听"}
{"_id":"0bd0c4ad60e2d041019b8d1f5e6d54c2","src":"../../yc_img/iu2.png","src2":"../../yc_img/iu1.png","src3":"../../yc_img/iu3.png","src4":"../../yc_img/iu5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"3","title2":"iu小可爱","title":"不愧是韩国第一女solo"}
{"_id":"0bd0c4ad60e2d041019b8d205ddb6049","src":"../../yc_img/lhn1.png","src2":"../../yc_img/lhn1.png","src3":"../../yc_img/lhn3.png","src4":"../../yc_img/lhn5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"3","title2":"蕾哈娜","title":"期待你的收听"}
{"_id":"0bd0c4ad60e2d041019b8d21436fa23d","src":"../../yc_img/lh4.png","src2":"../../yc_img/lh1.png","src3":"../../yc_img/lh2.png","src4":"../../yc_img/lh5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"4","title2":"鹿晗","title":"全买开场绝美颤音"}
{"_id":"0bd0c4ad60e2d041019b8d22165a5e07","src":"../../yc_img/zjq4.png","src2":"../../yc_img/zjq1.png","src3":"../../yc_img/zjq2.png","src4":"../../yc_img/zjq5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"4","title2":"周洁琼","title":"古装美女琵琶美人"}
{"_id":"0bd0c4ad60e2d041019b8d2333f512a7","src":"../../yc_img/lhn3.png","src2":"../../yc_img/lhn1.png","src3":"../../yc_img/lhn2.png","src4":"../../yc_img/lhn5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"4","title2":"蕾哈娜","title":"期待你的收听"}
{"_id":"0bd0c4ad60e2d041019b8d243cb62bf3","src":"../../yc_img/wje1.png","src2":"../../yc_img/wje1.png","src3":"../../yc_img/wje2.png","src4":"../../yc_img/wje5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"4","title2":"王嘉尔","title":"江苏2017跨年之夜"}
{"_id":"0bd0c4ad60e2d041019b8d253bc48721","src":"../../yc_img/wyf3.png","src2":"../../yc_img/wyf3.png","src3":"../../yc_img/wyf2.png","src4":"../../yc_img/wyf5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"4","title2":"吴亦凡","title":"遇上陈伟霆两大男生"}
{"_id":"0bd0c4ad60e2d041019b8d26422c4a7c","src":"../../yc_img/tl3.png","src2":"../../yc_img/tl1.png","src3":"../../yc_img/tl2.png","src4":"../../yc_img/tl5.png","_openid":"o9sNc495J8ropV5Ol8PMWivXMwOk","a":"4","title2":"泰勒","title":"期待你的收听"}
{"_id":"79550af260e2f431246ca7b06d1955b8","a":"0","src":"../../yc_img/lhn3.png","src2":"../../yc_img/lhn2.png","src3":"../../yc_img/lhn1.png","src4":"../../yc_img/lhn5.png","title2":"演绎绝美抒情曲","title":"蕾哈娜"}
{"_id":"b00064a760e2f4d72528c49c71cd1d45","src":"../../yc_img/wje4.png","src2":"../../yc_img/wje1.png","src3":"../../yc_img/wje2.png","src4":"../../yc_img/wje5.png","title":"王嘉尔《一个人》","title2":"第三届硬地围炉夜","a":"0"}