找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序开发资源

关注:1328

所属分类: 微信开发 微信小程序开发资源

微信小程序、微信小程序开发,提供各类小程序开发工具及开发教程。

返回微信小程序开发者社区首页

[最新文章] 微信小程序小白项目开发案例之音乐播放器——首页index

[复制链接]
查看: 1839|回复: 3

TA的社区排名

积分:NO. 348 名

发帖:NO. 2039 名

在线:NO. 1438 名

最佳答案
1 

17

主题

21

帖子

825

积分

专家路上

积分
825
 楼主| 发表于 2017-2-13 18:34:20 | 显示全部楼层 |阅读模式
本帖最后由 peoples 于 2017-2-13 18:49 编辑

首页index

开始构建小程序首页。
第一步,我们需要创建顶部的导航栏,效果应该类似图:
3445.png

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

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

上一节:微信小程序小白项目开发案例之音乐播放器——配置项目文件
下一节:微信小程序小白项目开发案例之音乐播放器——推荐页


回复

使用道具 举报

最佳答案
0 

0

主题

4

帖子

94

积分

新人求带

积分
94
发表于 2017-2-28 13:42:46 | 显示全部楼层
绝世好帖
回复

使用道具 举报

TA的社区排名

积分:NO. 2146 名

发帖:NO. 2114 名

在线:NO. 2650 名

最佳答案
0 

1

主题

20

帖子

260

积分

新人求带

积分
260
发表于 2017-3-2 15:58:22 | 显示全部楼层
好东西,收藏了。
回复 支持 反对

使用道具 举报

TA的社区排名

积分:NO. 244 名

发帖:NO. 663 名

在线:NO. 548 名

最佳答案
0 

0

主题

42

帖子

1001

积分

专家路上

积分
1001
发表于 2017-3-2 22:26:49 | 显示全部楼层
顶.支持,路过!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

网站业务
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com