小程序---仿百思不得姐
话不多说,先看效果图
个人觉得先看官方文档,了解它有什么,再开始动手写效果会好点。
小程序文件结构
一个页面由四个文件组成,并且四个文件必须同名
- 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,即模板,作用是定义代码片段,然后在不同的地方调用。
使用网络数据渲染页面
小程序中不能操作Dom,动态渲染页面的唯一方式就是在页面中绑定数据,然后在js文件中修改数据。比如在第一个swiper-item
中绑定了一个数组allDataList
,当在js文件中调用setData方法修改这个数组时,列表也会被修改。
要使用网络数据当然得先进行网络访问,微信已经提供了网络请求的API。
var that = this;
wx.request({url: 'http://api.budejie.com/api/api_open.php?a=list&c=data&type=1',data: {},method: 'GET', header: "application/json", // 设置请求的 headersuccess: function(res){console.log(res);//通过修改绑定的数组来改变页面that.setData({allDataList: res.data.list});},fail: function() {// fail},complete: function() {// complete}
})
请求结果如下
从结果中可以看出,数组中装着的是一个个的对象,我们可以直接通过字段取到他们的值。所以我们在wxml文件中绑定数据的时候就可以这样写:
<view class="top"> <!--头像--><image class="avator" src="{{item.profile_image}}" mode="aspectFit"></image><!--标题、时间--><view class="title-time"><text class="title">{{item.name}}</text><text class="time">{{item.create_time}}</text></view><!--更多按钮--><image class="morebtnnormal" src="../../images/index/morebtnnormal.png" mode="center" ></image>
</view>
这样就直接绑定了头像 profile_image、名字 name、创建时间 create_time。其他部分也是用这种方式绑定的。
下拉刷新
实现下拉刷新有两种方式,第一种是绑定scrollView的bindscrolltoupper
方法
<scroll-view scroll-y bindscrolltoupper="scrolltoupper">
scrolltoupper:function(){//刷新数据
}
还有一种是在Page的onPullDownRefresh
方法中发出请求刷新数据。
//监听用户下拉动作
onPullDownRefresh:function(){//刷新数据
},
上拉加载更多
上拉加载更多也有两种方法,第一种是绑定scrollView的bindscrolltolower
方法,但是列表数量少的时候,这个方法不靠谱,经常不会触发
<scroll-view scroll-y bindscrolltolower ="scrolltolower">
scrolltolower:function(){//发出请求添加数据
}
第二种方法是在Page的onReachBottom
方法中发出请求加载数据
onReachBottom:function(){currentPage++;//发出请求添加数据
}
Tips
推荐一个微信小程序开发论坛
小程序-仿百思不得姐 github地址
本文中代码和项目中实际代码有细微差别,具体细节请访问github查看源代码。
小程序---仿百思不得姐相关推荐
- 小程序仿 axios 请求封装
一.新建request.js /** 功能:小程序仿 axios 的请求封装*/ export default class Request {// 配置项configure = {baseURL: ' ...
- 微信小程序仿微信SlideView组件slide-view
微信小程序仿微信SlideView组件. 使用 1.安装 slide-view 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装 ...
- 小程序 仿麦当劳_手机上的麦当劳和星巴克:为什么现在首先使用移动应用程序...
小程序 仿麦当劳 by James Hsu 由徐H 手机上的麦当劳和星巴克:为什么现在首先使用移动应用程序 (McDonald's and Starbucks on Your Phone: Why M ...
- Java微信运动步数排序设计_微信小程序仿微信运动步数排行(交互)
本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自己留个笔记,废话不多说了,具体如下: 效果图如下: wxml: {{item.name}} {{item.steps}} wxss: ...
- android微信运动页面开发,微信小程序仿微信运动步数排行(交互)
微信小程序仿微信运动步数排行(交互) 发布时间:2020-08-20 00:51:02 来源:脚本之家 阅读:101 作者:祈澈姑娘 本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自 ...
- 微信小程序仿网易云音乐(使用云开发,提供源码)
微信小程序仿网易云音乐(使用云开发,提供源码)!!!!!!!!!!! 源码: 链接:https://pan.baidu.com/s/1z_ZnRVbT4vjEENimi8yBQQ 提取码:u0o3 一 ...
- 微信小程序-仿朋友圈点赞评论操作面板
目录 微信小程序-仿朋友圈点赞评论操作面板 一.效果 二.实现 1.wxml实现 2.js实现 3.wxss实现 三.记录 1.dataset使用 微信小程序-仿朋友圈点赞评论操作面板 一.效果 二. ...
- 小程序仿微信聊天按住说话功能
小程序仿微信聊天按住说话功能 实现:按住说话有录音动画,上滑可取消发送,松开发送录音 录音授权判断 # .wxml <view class="btn {{touchBtn?'hover ...
- 到家服务公司php源码,微信小程序-仿五洲到家商城源码
微信小程序-仿五洲到家商城源码 微信小程序仿五洲到家商城源码是一款精仿五洲到家app界面的小程序源码,适用于各类小程序商城系统,功能及模块均值得借鉴! 对应功能模块 > * 首页(定位成功情况且 ...
最新文章
- 练习PYTHON之EPOLL
- Postman导入和导出接口
- 全球及中国高压和超高压波纹铝护套交联聚乙烯电缆行业产销现状与投资策略建议报告2021-2027年版
- 中科微研课题上犹授牌-农业大健康·李喜贵:谋定功能性农业
- could not initialize proxy - no Session
- 信息抽取(二)花了一个星期走了无数条弯路终于用TF复现了苏神的《Bert三元关系抽取模型》,我到底悟到了什么?
- oracle 优化分组 sql语句,Oracle SQL语句之常见优化方法 五
- Git---命令行语法
- 能改变原生web前端元素样式的water.css
- Depix从像素化屏幕快照中恢复密码
- IntelliJ IDEA搭建Hadoop开发环境(下)
- redis 过期删除策略和淘汰策略 -redis设计与实现笔记
- 保研夏令营面试、考研复试自我介绍、个人展示模板与撰写注意事项
- OpenCV实战之人脸美颜美型(六)——磨皮
- 鸿蒙小型系统内核Liteos-a开发指南
- 上门洗车系统搭建解决方案-上门服务系统
- 面试不慌,史上最全 Redis 面试题(含答案)
- OpenCV图像颜色反转算法
- Spotfire 的排名函数Rank和DenseRank
- iOS开发之OC入门(类的使用)