找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序开发资源

关注:1477

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

本版块为微信小程序资源分享版块,包括微信小程序开发中可能会用到的各类小程序开发工具、小程序demo及开发教程等。

快捷导航www.henkuai.com):微信小程序开发者社区微信小程序开发问答微信小程序开发交流群


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

[复制链接]
查看: 3951|回复: 14
最佳答案
1 

17

主题

21

帖子

856

积分

专家路上

积分
856
 楼主| 发表于 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

帖子

114

积分

新人求带

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

使用道具 举报

最佳答案
0 

1

主题

22

帖子

381

积分

略知一二

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

使用道具 举报

最佳答案
0 

0

主题

106

帖子

6764

积分

S2

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

使用道具 举报

最佳答案
0 

0

主题

10

帖子

194

积分

新人求带

积分
194
发表于 2017-4-13 16:20:31 | 显示全部楼层
index.json报错,怎么处理啊 大神
回复 支持 反对

使用道具 举报

最佳答案
0 

1

主题

7

帖子

62

积分

新人求带

积分
62
发表于 2017-4-18 12:44:58 | 显示全部楼层
好东西,谢谢楼主
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

10

帖子

90

积分

新人求带

积分
90
发表于 2017-6-7 10:43:28 | 显示全部楼层
好东西,学习学习
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

18

帖子

152

积分

新人求带

积分
152
发表于 2017-6-8 13:15:48 | 显示全部楼层
不错 看看 收藏了
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

41

帖子

245

积分

新人求带

积分
245
发表于 2017-6-8 16:09:14 | 显示全部楼层
好贴,值得一看,。
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

15

帖子

191

积分

新人求带

积分
191
发表于 2017-6-13 08:03:08 | 显示全部楼层
66666666666666
回复 支持 反对

使用道具 举报

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

本版积分规则



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


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

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

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

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com