推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：511
-
2020-04-04 浏览：505
-
2020-05-12 浏览：502
微信小程序中实现仿今日头条AppTopbar
发布时间:2020-12-06我们先看具体效果好了 ↓↓↓
这个项目(wx-topbar)已经放在GitHub上了——点此前往，欢迎学习交流。
接下来，简要说一下实现思路。
先看视图层，Topbar横向滚动对应的WXML代码如下：
<scroll-view class="navbar" scroll-x="true" scroll-left="{{scrollNavbarLeft}}"> <view class="navbar-item {{ navbarArray[item].type }}" id="{{ item }}" wx:for="{{ navbarShowIndexArray }}" catchtap="onTapNavbar"> <view class="navbar-item-wrap">{{ navbarArray[item].text }}</view> </view> <view class="navbar-item visibility-hidden"> <view class="navbar-item-wrap">空白</view> </view> </scroll-view> <view class="navbar-arrow-down" catchtap="showChannelSettingModal"> <view class="navbar-arrow-down-wrap"> <image class="navbar-arrow-icon" src=http://www.yiyongtong.com/archives/"/images/index/icon_arrow_down.png"></image> </view> </view>scroll-view负责Topbar中各个频道的呈现，所有频道的相关数据都存储在navbarArray这个对象数组里，而数组navbarShowIndexArray里存储了要显示频道在数组navbarArray中的索引。
不难猜测，频道是否选中高亮，与数组navbarArray有关；频道是否显示，与数组navbarShowIndexArray有关。
点击某个频道名称，就会触发对应频道的切换操作。
view.navbar-arrow-down对应的是右上角的向下箭头，可采用fixed定位类型，点击后弹出管理频道的Modal.
<view class="channel-setting-modal {{ channelSettingModalShow }}" hidden="{{ channelSettingModalHide }}"> <view class="channel-show-text"> <view class="channel-show-text-wrap">显示频道</view> </view> <view class="channel-item" wx:for="{{ navbarShowIndexArray }}"> <view class="channel-item-wrap"> <view class="channel-item-left"> <image class="channel-item-icon-minus {{ !index || navbarShowIndexArray.length < 4 ? 'visibility-hidden' : '' }}" id="{{ item }}.0" src=http://www.yiyongtong.com/archives/"/images/index/icon_minus.png" catchtap="hideChannel"></image> <view class="channel-item-text">{{ navbarArray[item].text }}</view> </view> <view class="channel-item-up {{ index < 2 ? 'visibility-hidden' : '' }}" id="{{ item }}.00" catchtap="upChannel">上移</view> </view> </view> <view class="channel-hide-text"> <view class="channel-hide-text-wrap">隐藏频道</view> </view> <view class="channel-item" wx:for="{{ navbarHideIndexArray }}"> <view class="channel-item-wrap"> <view class="channel-item-left"> <image class="channel-item-icon-plus" id="{{ item }}.0" src=http://www.yiyongtong.com/archives/"/images/index/icon_plus.png" catchtap="showChannel"></image> <view class="channel-item-text">{{ navbarArray[item].text }}</view> </view> <view class="channel-item-up visibility-hidden">上移</view> </view> </view> </view>在这个管理频道的Modal里，通过改变数组navbarShowIndexArray来控制频道是否显示和显示顺序，同时，需要另外一个数组navbarHideIndexArray来存储隐藏的频道。
Modal显示的时候，Topbar需要被另一个写有“频道设置”字样的Bar覆盖。
<view class="channel-setting {{ channelSettingShow }}"> <view class="channel-setting-text">频道设置</view> <view class="navbar-arrow-up" catchtap="hideChannelSettingModal"> <image class="navbar-arrow-icon navbar-arrow-icon-up" src=http://www.yiyongtong.com/archives/"/images/index/icon_arrow_up.png"></image> </view> </view>- 上一篇：微信小程序MAP地图开发入门(一)
- 下一篇：扩展微信小程序框架功能：Redux
