B2C电商
B2B交易系统
智慧门店
分销商城
社区电商
查看更多

怎么开小程序商城店铺
  • 店铺开通

    销客多小程序商城,可快速开通上架店铺

  • 拉新推广

    链接12亿微信流量,拉新工具沉淀意向客户

  • 复购裂变

    拼团、分销等提升转化,不断裂变新用户购买

  • 对接门店

    线上导流、促活门店,实现线上下同步发展

制作小程序
HiShop > Hi小程序 > 小程序开发 >

微信小程序音乐播放器,音乐播放器小程序制作步骤(首页)

2020-09-27 作者:黄先生

   开始构建小程序首页。

  第一步,我们需要创建顶部的导航栏,效果应该类似图:

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

微信小程序音乐播放器,音乐播放器小程序制作步骤(首页)

  为了实现这一效果,这里采取一个比较简单的做法,为每个标签的每个状态(选中/未选中)创建一个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,从而更新界面。

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

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

推荐文章

注册小程序
注册小程序