258资源分享网

话不多说，先看效果图个人觉得先看官方文档,了解它有什么，再开始动手写效果会好点。 小程序文件结构 一个页面由四个文件组成，并且四个文件必须同名 wxml ： 页面结构，类似html。 wxss ： 页面样式表，类似css。 ...

 

 

 

本文作者Harvie_Z ，已经获得授权

话不多说，先看效果图

 

个人觉得先看官方文档,了解它有什么，再开始动手写效果会好点。

小程序文件结构

一个页面由四个文件组成，并且四个文件必须同名

wxml ： 页面结构，类似html。

wxss ： 页面样式表，类似css。

json ： 页面配置

js ：页面逻辑。

程序配置

在 app.json 文件中注册需要加载的页面、navigationBar和底部tab的各种属性、网络超时时间。

注册页面

"pages":[ "pages/index/index", "pages/index/detail", "pages/login/login", "pages/membercenter/membercenter", "pages/recommend/recommend", "pages/attention/attention" ],

放在第一的页面将会在程序加载完成时显示。

配置窗口

"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "black", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"white", "backgroundColor": "#eaeaea" },

这里配置的是所有窗口的显示样式，如果某个页面需要更改显示样式，直接为相应的页面添加一个json文件配置即可。

其他的json文件只能配置window属性。

配置tabBar

"tabBar": { "color": "black", "borderStyle": "white", "selectedColor": "rgb(176,170,168)", "backgroundColor": "white", "list": [{ "pagePath": "pages/index/index", "text": "精华", "iconPath": "images/tabBar/tabBar_essence_click_icon.png", "selectedIconPath": "images/tabBar/tabBar_essence_icon.png" }, { "pagePath": "pages/recommend/recommend", "text": "推荐关注", "iconPath": "images/tabBar/tabBar_new_click_icon.png", "selectedIconPath": "images/tabBar/tabBar_new_icon.png" } }] },

配置底部tabBar的文字颜色、图标、页面路径等，和iOS开发中设置tabBar的思路挺像的。

网络超时时间和调试开关

"networkTimeout": { "request": 10000 }, "debug":true

networkTimeout配置的是网络超时时间，这里的时间单位是毫秒，这里配置的也就是10秒超时。debug控制是否开启调试，如果开启了，可以看到log打印。

基本的配置搞定后，就可以开始填内容了。

顶部tab <view class="top-tab"> <view class="top-tab-item {{currentTopItem==idx ? 'active' : ''}}" wx:for="{{topTabItems}}" wx:for-index="idx" data-idx="{{idx}}" bindtap="switchTab"> {{item}} </view> </view>

使用wx:for结构循环渲染出5个Item

为它们绑定一个点击方法switchTab

设置一个自定义属性data-idx用来记录每个Item的索引，以便在点击的时候能够知道是哪个Item被点击。

内容列表 <swiper class="swiper" current="{{currentTopItem}}" bindchange="bindChange" duration="300" style="height:{{swiperHeight}}px" > <!--全部--> <swiper-item> <scroll-view class="scrollView" scroll-y="true" bindscrolltolower="loadMoreData" > <block wx:for="{{allDataList}}" wx:for-item="item"> <navigator url="detail?id={{item.id}}"> <template is="mainTabCell" data="{{item}}" /> </navigator> </block> </scroll-view> </swiper-item> ... ... </swiper>

因为需要横向分页滚动，所以我选择使用swiper作为容器，然后再让每个swiper-item包裹一层可以上下滚动的scrollView，再使用wx:for循环渲染出列表。

navigator 是导航组件。
template，即模板，作用是定义代码片段，然后在不同的地方调用。

使用网络数据渲染页面