pp电子

登录
免费开通
产品中心
更多服务

微信小程序音乐播放器,音乐播放器小程序制作方法（首页）

—— 2020 ——
09/27
00:00

泉源：

作者：未知

阅读：0

栏目：小程序开发

2020/9/27 0:00:00 泉源：不详 作者：未知
 　　最先构建小程序首页。。。

　　第一步，，，，，我们需要建设顶部的导航栏，，，，，效果应该类似图：

　　可以看到这个导航栏由三个按键组成，，，，，三个按键中分屏幕宽度，，，，，文字居中显示，，，，，在选中后下方有绿色边框。。。

微信小程序音乐播放器,音乐播放器小程序制作方法（首页）

　　为了实现这一效果，，，，，这里接纳一个较量简朴的做法，，，，，为每个标签的每个状态(选中/未选中)建设一个view。。。

  1. <view class="tab">
  2.   <view class="tab-item tab-item-selected" bindtap="tabItemTap" data-view="1" wx:if="{{currentView==1}}">推荐</view>
  3.   <view class="tab-item" data-view="1" bindtap="tabItemTap" wx:if="{{currentView!=1}}">推荐</view>
  4.   <view class="tab-item tab-item-selected" bindtap="tabItemTap" data-view="2" wx:if="{{currentView==2}}">排行</view>
  5.   <view class="tab-item" data-view="2" bindtap="tabItemTap" wx:if="{{currentView!=2}}">排行</view>
  6.   <view class="tab-item tab-item-selected" bindtap="tabItemTap" data-view="3" wx:if="{{currentView==3}}">检索</view>
  7.   <view class="tab-item" data-view="3" bindtap="tabItemTap" wx:if="{{currentView!=3}}">检索</view>
  8. </view>
  1. .tab-item {
  2.   float: left;
  3.   width: 33.333333%;
  4.   height: 43px;
  5.   font-size: 16px;
  6.   text-align: center;
  7. }
  8. .tab-item-selected {
  9.   color: #31c27c;
  10.   border-bottom: 2px solid #31c27c;
  11. }

　　所有6个view都享有tab-item这个class的属性，，，，，在这里界说了组件的宽度为1/3，，，，，字体居中显示以及字号。。。三个结构拥有tab-item-selected属性，，，，，这个属性为这个view添加了底部的绿色边框。。。currentView为控制这一组件的值，，，，，当currentView=1时，，，，，凭证wx：if属性，，，，，只有带下边框的“推荐”view与不带下边框的“排行”，，，，，“检索”会被渲染，，，，，也就实现了我们想要的效果。。。　　

　　在index.js里编写view的点击事务tabItemTap，，，，，这个名字跟我们在写wxml时bindtap一致。。。

  1. //获取应用实例
  2. var app = getApp()
  3. Page({
  4.     data: {
  5.         currentView: 1,
  6.     },
  7.     onLoad: function () {
  8.         var that = this;
  9.     },
  10.     tabItemTap: function (e) {
  11.         var _dataSet = e.currentTarget.dataset;
  12.         this.setData({
  13.             currentView: _dataSet.view
  14.         });
  15.     },
  16. })

　　每次点击后，，，，，获取点击view的data-view的值，，，，，然后将这个值赋值给currentView，，，，，从而更新界面。。。

　　微信小程序小白项目开发案例之音乐播放器——设置项目文件

　　微信小程序小白项目开发案例之音乐播放器——推荐页


【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿，，，，，由于未联系到知识产权人或未发明有关知识产权的挂号，，，，，若有知识产权人并不肯意我们使用，，，，，若是有侵权请连忙联系。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真，，，，，仅系客观性形貌，，，，，如您需要相识该类商品/服务详细的资讯，，，，，请您直接与该类商品/服务的提供者联系。。。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商，，，，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。

KESION 一直通过手艺立异，，，，，提供产品和服务，，，，，助力企业向数字化转型，，，，，通过科技驱动商业刷新，，，，，让商业变得更智慧！



▼点击进入pp电子官网相识更多



热门标签
微信小程序 SaaS
上/下篇

  • 小程序会员开卡插件怎样添加

    　线下许多小程序都会关联会员卡，，，，，这是需要在会员开卡场景下举行，，，，，开发者必需通过开卡插件来完成添加。。。...

    SaaS 2020/9/27 0:00:00

  • 伊利小程序商城开发案例

    伊利小程序商城“伊利牛奶京东自营旗舰店”已经悄然上线数日，，，，，由京东开普勒提供手艺支持。。。...

    SaaS 2020/9/27 0:00:00
换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
微信小程序音乐播放器,音乐播放器小程序制作方法（首页） -