微信小程序怎么制作音乐播放器检索页


这篇文章主要介绍“微信小程序怎么制作音乐播放器检索页”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序怎么制作音乐播放器检索页”文章能帮助大家解决问题。
  首页的最后一部分为检索页,也就是让用户通过关键字搜索歌曲或专辑。  说到搜索页,比不可少的就是关键字的输入框。  参照这个样式,布局文件应该为:

确定 复制代码  格式文件为:.search-bar { background:#f7f7f7; padding:20rpx;}.search-input-warp { position:relative; padding:16rpx 24rpx 16rpx 70rpx; background:#fff;}.search-input-icon { content:” “; position:absolute; top:18rpx; left:20rpx; display:inline-block; vertical-align:middle; width:40rpx; height:40rpx; background-image:url(“../../resources/images/search.png”); background-repeat:no-repeat; background-size:40rpx;}.search-input { font-size:28rpx; line-height:40rpx;}.search-input-placeholder { color:#ddd; font-size:28rpx; line-height:40rpx;}.search-cancel { position:absolute; right:0; top:0; display:inline-block; font-size:32rpx; height:90rpx; width:140rpx; text-align:center; line-height: 90rpx; z-index:50; background:#f7f7f7;}复制代码  因为要提交关键字,所以使用表单组件,内部由表示搜索的放大镜图标,代表输入完成的“确定”按钮以及输入框组成。    除了输入框以外,此页还需要显示的内容应该是搜索的结果列表,搜索的历史记录以及热门关键字。这些内容应该显示在输入框下方,并按一定逻辑切换。他们之间的逻辑关系为:   用户进入检索页,显示的内容应该是输入框与热门关键字。 开始输入后(即输入框获得焦点),应该显示历史记录。 点击确定,显示结果列表。 清空输入框内容后,返回关键字显示。
    可以看出,对输入框的操作决定了当前页面显示的内容,所以我们需要监听输入框的获取焦点事件(bindfocus),确定点击事件(bindtap)以及输入事件(bindinput),还需要记录输入的关键字searchKey。    输入框完成后我们先写热门关键字,这些关键字也是来源于网络,所以还需要请求网络。在services/music里添加方法:function getHotSearchKey(callback){ var data = { g_tk: 5381, uin: 0, format: ‘json’, inCharset: ‘utf-8’, outCharset: ‘utf-8’, notice: 0, platform: ‘h6’, needNewCode: 1, _: Date.now() }; wx.request({ url: ‘http://c.y.qq.com/splcloud/fcgi-bin/gethotkey.fcg’, data: data, header: { ‘Content-Type’: ‘application/json’ }, success: function (res) { if (res.statusCode == 200) { callback(res.data) } else {
} } });}module.exports = {getHotSearchKey:getHotSearchKey}复制代码  返回JSON格式结果为{ “code”: 0, “data”: { “hotkey”: [免费云主机域名 { “k”: “三生三世十里桃花 “, “n”: 90558 }, { “k”: “DJ “, “n”: 67590 }, { “k”: “薛之谦 “, “n”: 60425 }, { “k”: “凉凉 “, “n”: 37056 }, { “k”: “那片星空那片海 “, “n”: 29170 }, { “k”: “理想 “, “n”: 28695 }, ], “special_key”: “歌手”, “special_url”: “http://y.qq.com/m/act/singer/index.html?ADTAG=search” }, “subcode”: 0}复制代码  这里返回的hotkey就是我们需要的关键字啦,除此之外,我们还看到下面有“special_key”这一部分,这相当于广告部分,为服务器推荐的搜索关键字。所以我们以标签的形式显示关键字,对于广告那部分关键字,我们以红色字体,并且放在最前方,最后达成的样式应该为图10-5所示:            43232.png (5.21 KB, 下载次数: 4)     下载附件  保存到相册     2017-2-15 11:19 上传             实现这一布局的代码为: 热门搜索 {{special.key}} {{item.k}} 复制代码  这里面showSearchPanel的值为我们控制这一页面切换的依据,当其为1的时候,显示热门关键字。    绑定的数据有两个,special和hotkey。对于special部分,为了防止服务器缺失“special_key”这一部分从而导致没有数据显示,我们定义一个数据showSpecial来决定是否显示这一部分。    将这三个数据以及输入框用到的searchKey添加到data里吧。    修改index.js文件://引用网络请求文件var MusicService = require(‘../../services/music’);
//获取应用实例var app = getApp()Page({ data: { indicatorDots: true, autoplay: true, interval: 5000, duration: 1000, radioList: [], slider: [], mainView: 1, topList:[], hotkeys: [], showSpecial: false, special: { key: ”, url: ” }, searchKey: ”, }, onLoad: function () { var that = this; MusicService.getRecommendMusic(that.initPageData); MusicService.getTopMusic(that.initTopList); MusicService.getHotSearchKeys(that.initSearchHotKeys); },
initSearchHotKeys: function (data) { var self = this; if (data.code == 0) { var special = { key: data.data.special_key, url: data.data.special_url }; var hotkeys = []; if (data.data.hotkey && data.data.hotkey.length) {//当返回数据不为空且长度不为0 for (var i = 0; (i var item = data.data.hotkey[i]; hotkeys.push(item); } } if (special != undefined) { //当返回项有special部分时,showSpecial为true self.setData({ showSpecial: true }) } else { //没有special部分,showSpecial为false self.setData({ showSpecial:false }) } self.setData({ special: special, hotkeys: hotkeys }) } },})复制代码  数据加载完成后,我们为每个热门关键字view添加点击事件。hotKeysTap: function (e) { //TODO },复制代码  在这个点击事件里,我们需要做的事情有:   将点击的关键词加入历史记录。 将页面切换到搜索结果列表。 在完成搜索结果列表页后我们再来完善这一部分吧。
    最后附上这一部分的格式文件。.quick-search { padding:20rpx; box-sizing:border-box;}.quick-search-title { font-size:28rpx;}.quick-search-bd { position:relative; margin-top:20rpx;}.quick-search-item { font-size:28rpx; float:left; margin:0 20rpx 20rpx 0; line-height:40rpx; padding:10rpx 20rpx; border-radius:30rpx; color:#000; border:2rpx solid rgba(0,0,0,.6);}.quick-search-item-red { font-size:28rpx; float:left; margin:0 20rpx 20rpx 0; line-height:40rpx; padding:10rpx 20rpx; border-radius:30rpx; color:#fc4524; border:2rpx solid #fc4524;}关于“微信小程序怎么制作音乐播放器检索页”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注百云主机行业资讯频道,小编每天都会为大家更新不同的知识点。

相关推荐: 如何利用Pandas读取某列某行数据

小编给大家分享一下如何利用Pandas读取某列某行数据,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!实际操作中我们经常需要寻找数据的某行或者某列,这里介绍我在使用Pandas时用到的…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 01/09 10:05
下一篇 01/09 10:05

相关推荐