文章目录

  • 代码目录
  • 详细代码
  • 实现效果
  • 代码说明
    • 配置
    • 组件
    • API
  • 调试

代码目录

详细代码

  • data_0.json
const items = [{"id":"q1","imageUrl":"../../images/avatar.png","name":"John","text":"赞同了回答","question":"选择 Kindle 而不是纸质书的原因是什么？","from":"张三","answer":"难道不明白纸质书更贵啊！！！ 若觉得kindle更贵，我觉得要么阅读量太少，那确实没有买kindle的必要。要么买的都是盗版的纸质书？我不清楚不加以评论。。。 另外，用kindle看小说的怎么真心不懂了...","approveNum":10,"commentNum":20},{"id":"q2","imageUrl":"../../images/avatar.png","name":"John","text":"赞同了回答","question":"选择 Kindle 而不是纸质书的原因是什么？","from":"李四","answer":"难道不明白纸质书更贵啊！！！ 若觉得kindle更贵，我觉得要么阅读量太少，那确实没有买kindle的必要。要么买的都是盗版的纸质书？我不清楚不加以评论。。。 另外，用kindle看小说的怎么真心不懂了...","approveNum":10,"commentNum":20},{"id":"q3","imageUrl":"../../images/avatar.png","name":"John","text":"赞同了回答","question":"选择 Kindle 而不是纸质书的原因是什么？","from":"王五","answer":"难道不明白纸质书更贵啊！！！ 若觉得kindle更贵，我觉得要么阅读量太少，那确实没有买kindle的必要。要么买的都是盗版的纸质书？我不清楚不加以评论。。。 另外，用kindle看小说的怎么真心不懂了...","approveNum":10,"commentNum":20},{"id":"q4","imageUrl":"../../images/avatar.png","name":"John","text":"赞同了回答","question":"选择 Kindle 而不是纸质书的原因是什么？","from":"赵六","answer":"难道不明白纸质书更贵啊！！！ 若觉得kindle更贵，我觉得要么阅读量太少，那确实没有买kindle的必要。要么买的都是盗版的纸质书？我不清楚不加以评论。。。 另外，用kindle看小说的怎么真心不懂了...","approveNum":10,"commentNum":20},{"id":"q5","imageUrl":"../../images/avatar.png","name":"John","text":"赞同了回答","question":"选择 Kindle 而不是纸质书的原因是什么？","from":"孙七","answer":"难道不明白纸质书更贵啊！！！ 若觉得kindle更贵，我觉得要么阅读量太少，那确实没有买kindle的必要。要么买的都是盗版的纸质书？我不清楚不加以评论。。。 另外，用kindle看小说的怎么真心不懂了...","approveNum":10,"commentNum":20}
]module.exports = {items:items
}
  • data_1.json
const items = [{"id":"q6","imageUrl":"../../images/avatar14.png","name":"Tomas","text":"赞同了回答","question":"如何评价周杰伦的「中文歌才是最屌的」的言论？","from":"Lucy","answer":"不知道题主是否是学音乐的。 音乐有公认的经典，也有明显的流行趋势没有错。但归根结底，音乐是一种艺术，艺术是很主观的东西。跟画作一个道理，毕加索是大家，但很多人看不懂他的话，甚至觉得很难看...","approveNum":30,"commentNum":40},{"id":"q7","imageUrl":"../../images/avatar14.png","name":"Tomas","text":"赞同了回答","question":"如何评价周杰伦的「中文歌才是最屌的」的言论？","from":"Lily","answer":"不知道题主是否是学音乐的。 音乐有公认的经典，也有明显的流行趋势没有错。但归根结底，音乐是一种艺术，艺术是很主观的东西。跟画作一个道理，毕加索是大家，但很多人看不懂他的话，甚至觉得很难看...","approveNum":30,"commentNum":40},{"id":"q8","imageUrl":"../../images/avatar14.png","name":"Tomas","text":"赞同了回答","question":"如何评价周杰伦的「中文歌才是最屌的」的言论？","from":"老狗","answer":"不知道题主是否是学音乐的。 音乐有公认的经典，也有明显的流行趋势没有错。但归根结底，音乐是一种艺术，艺术是很主观的东西。跟画作一个道理，毕加索是大家，但很多人看不懂他的话，甚至觉得很难看...","approveNum":30,"commentNum":40},{"id":"q9","imageUrl":"../../images/avatar14.png","name":"Tomas","text":"赞同了回答","question":"如何评价周杰伦的「中文歌才是最屌的」的言论？","from":"李安然","answer":"不知道题主是否是学音乐的。 音乐有公认的经典，也有明显的流行趋势没有错。但归根结底，音乐是一种艺术，艺术是很主观的东西。跟画作一个道理，毕加索是大家，但很多人看不懂他的话，甚至觉得很难看...","approveNum":30,"commentNum":40},{"id":"q10","imageUrl":"../../images/avatar14.png","name":"Tomas","text":"赞同了回答","question":"如何评价周杰伦的「中文歌才是最屌的」的言论？","from":"朱玮娇","answer":"不知道题主是否是学音乐的。 音乐有公认的经典，也有明显的流行趋势没有错。但归根结底，音乐是一种艺术，艺术是很主观的东西。跟画作一个道理，毕加索是大家，但很多人看不懂他的话，甚至觉得很难看...","approveNum":30,"commentNum":40}
]module.exports = {items:items
}
  • app.json
{"pages":["pages/index/index","pages/answer/answer","pages/question/question"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#16C4AF","navigationBarTitleText": "Weixin","navigationBarTextStyle":"white","enablePullDownRefresh":true,"onReachBottomDistance":50},"style": "v2","sitemapLocation": "sitemap.json"
}
  • page/index
<!--index.wxml-->
<scroll-view class="container" scroll-y="{{true}}"upper-upper-threshold="10"lower-threshold="10"bindscrolltoupper="handleScrollToUpper"bindscrolltolower="handleScrollToLower"><view class="search"><view class="search-left"><image src="../../images/search.png" /><input type="text" placeholder="搜索"/></view><view class="search-right"><image src="../../images/add.png" /></view></view><block wx:for="{{items}}" wx:for-index="idx" wx:for-item="item"  wx:key="id"><view class="item"><view class="source"><image src="{{item.imageUrl}}" class="avatar"/><view class="description"><view >{{item.name}}</view><view >{{item.text}}</view></view></view><view class="content"><view class="question" bindtap="handleQuestionTap">{{item.question}}</view><view class="answer" bindtap="handleAnswerTap"><text>{{item.from}} :</text><text>{{item.answer}}</text></view><view class="actions"><view><view class="action"><image src="../../images/approve.png" /><text >{{item.approveNum}}</text></view><view class="action"><image src="../../images/comment.png" /><text >{{item.commentNum}}</text></view></view><view ><view class="action"><image src="../../images/more.png" /></view></view></view></view></view></block>
</scroll-view>

/**index.wxss**/
.container{background-color: #f3f3f3;height: 1300rpx;
}
.search{display: flex;justify-content: space-between;align-items: center;padding: 10rpx 20rpx;box-sizing: border-box;background-color: #ddd;
}
.search-left{background-color: #eee;flex: 2;border-radius: 40rpx;padding-right: 40rpx;box-sizing: border-box;
}
.search-left image{width: 48rpx;height: 48rpx;padding: 10rpx 20rpx;vertical-align: middle;}
.search-left input{display: inline-block;vertical-align: middle;width: calc(100% - 88rpx);
}
.search-right{padding-left: 20rpx;
}
.search-right image{width: 80rpx;height: 80rpx;vertical-align: middle;
}.item{padding: 10rpx 20rpx;color: #121212;border-top: 1px solid #f9f9f9;margin-bottom: 10rpx;background-color: #fff;
}
.source{display: flex;align-items: center;
}
.avatar{width: 64rpx;height: 64rpx;background-color: #eee;border-radius: 50%;
}
.description{display: inline-block;margin-left: 10rpx;
}
.description view:nth-of-type(1){font-size: 28rpx;
}
.description view:nth-of-type(2){font-size: 24rpx;color: #8590a6;
}
.content{margin-top: 10rpx;
}
.question{font-size: 28rpx;font-weight: 550;
}
.answer{margin-top: 5rpx;font-size: 26rpx;
}
.answer text:nth-of-type(1){font-weight: 600;color: #444;
}
.answer text:nth-of-type(2){line-height: 36rpx;margin-left: 10rpx;
}
.actions{display: flex;justify-content: space-between;margin-top: 12rpx;
}
.actions view:nth-of-type(1){display: flex;
}
.action{display: flex;align-items: center;margin-right: 30rpx;
}
.action image{width: 36rpx;height: 36rpx;
}
.action text{font-size: 24rpx;color: #8590a6;margin-left: 5rpx;
}
//index.js
Page({data:{items:[],refreshed:false,reloaded:false},onLoad:function(){const self = this;this.getDataFromServer("../../data/data_0.js").then(function(items){self.setData({items});})},handleQuestionTap:function(){wx.navigateTo({url:"../question/question"});},handleAnswerTap:function(){wx.navigateTo({url:"../answer/answer"})},handleScrollToUpper:function(){let {refreshed,reloaded} = this.data;if(reloaded || refreshed) return;wx.showNavigationBarLoading();this.refresh();},handleScrollToLower:function(){let {reloaded} = this.data;if(reloaded) return;this.reload();},refresh:function(){const self = this;self.showToast("刷新中","loading",2000,true);self.getDataFromServer("../../data/data_0.js").then(function(items){self.setData({items,refreshed:true},function(){self.timeout(2000).then(function(){self.showToast("刷新成功","success",1000,true);wx.hideNavigationBarLoading();wx.stopPullDownRefresh();});});});},reload:function(){const self = this;self.showToast("加载中","loading",3000,true);self.getDataFromServer("../../data/data_1.js").then(function(tempItems){self.setData({items:self.data.items.concat(tempItems),reloaded:true},function(){self.timeout(3000).then(function(){self.showToast("加载成功","success",1000,true);});});});},getDataFromServer(url){return new Promise(function(resolve){const {items} = require(url);resolve(items);});},showToast(title,icon,duration,mask){wx.showToast({title,icon,duration,mask});},timeout:function(ms){return new Promise(resolve => setTimeout(resolve,ms));}
})
  • pages/question
<!-- question.wxml -->
<view class="container"><view class="question"><view class="tags"><text class="tag">阅读</text><text class="tag">电子书</text><text class="tag">kindle</text><text class="tag">文学</text><text class="tag">书籍</text></view><view class="title">选择 Kindle 而不是纸质书的原因是什么？</view><view class="detail"><text class="text {{isExpand?'expand':'collapse'}}">题主认为实体书的优势：\n1.手感好，更适合阅读;\n2.相对而言比kindle更便宜;\n3.书分次购入，就如同分期付款一样成本低。\n不理解kindle的价值在哪儿？\n当然有人说国外专业书很贵，kindle节约钱，题主表示理解，但不能理解使用kindle读小说的行为。</text><view class="operation" bindtap="handleOpeartion"><text>{{isExpand?"收起":"展开"}}</text><image src="../../images/{{isExpand?'collapse':'expand'}}.png"></image></view></view><view class="actions"><view class="action"><text>123</text><text>关注</text></view><view class="action"><text>234</text><text>评论</text></view><view class="action"><text>5678</text><text>浏览</text></view></view></view><view class="buttons"><view class="button"><image src="../../images/invite.png"/><view>邀请回答</view></view><view class="button"><image src="../../images/video.png" /><view>视频回答</view></view><view class="button"><image src="../../images/write.png" /><view>写回答</view></view><view class="button"><image src="../../images/follow.png" /><view>关注问题</view></view></view>
</view>

/* question.wxss */
.question{padding: 30rpx;
}
.tag{font-size: 28rpx;padding: 10rpx 20rpx;margin-right: 20rpx;border-radius: 10rpx;background-color: #eee;color: #555;
}
.title{margin: 40rpx 0;font-size: 36rpx;font-weight: bold;
}
.detail{margin-bottom: 40rpx;line-height: 40rpx;font-size: 27rpx;
}
.detail .text{display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-align: justify;
}
.expand{-webkit-line-clamp: 0;
}
.collapse{-webkit-line-clamp: 5;
}
.operation{vertical-align: middle;text-align: right;
}
.operation text{color: #8a8a8a;
}
.operation image{width: 32rpx;height: 32rpx;vertical-align: middle;
}
.action{display: inline-block;font-size: 26rpx;
}
.action text:nth-of-type(1){font-weight: bold;margin-right: 6rpx;
}
.action:not(:last-child):after{content:"•";color: #8590a6;margin: 0 10rpx;font-size: 16rpx;
}
.buttons{border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;display: flex;justify-content: space-around;align-items: center;
}
.button{color: #2c2c2c;text-align: center;margin: 20rpx 0;
}
.button image{width: 36rpx;height: 36rpx;padding-bottom: 6rpx;
}
.button view{font-size: 28rpx;
}

// question.js
Page({data:{isExpand:false,answerNum:257},handleOpeartion:function(){const self = this;this.setData({isExpand:!self.data.isExpand})}
})

实现效果

代码说明

配置
  • app.json

    • pages
      是一个数组，定义了小程序页面所在文件路径。
      数组的第一个元素就是微信小程序的首页。
      文件名不需要写后缀，框架会自动去寻找对应位置的.json、.js、.wxml和.wxss文件进行处理。
    • window
      设置小程序的状态栏、导航条、标题、窗口背景色。

      • backgroundTextStyle
        下拉加载时的样式，仅支持light|dark这两个值，默认是dark。
      • navigationBarBackgroundColor
        导航栏的背景色
      • navigationBarTitleText
        导航栏标题文本内容
      • navigationBarTextStyle
        导航栏标题颜色，仅支持black|white这两个值，默认是white。
      • enablePullDownRefresh
        是否开启全局的下拉刷新，true则开启，false则关闭，默认是关闭。
      • onReachBottomDistance
        默认值是50，单位是px。
        当距离页面小于50px时，触发上拉触底事件。
    • sitemapLocation
      指定sitemap.json的位置，默认sitemap.json与app.json同目录。
  • sitemap.json
    用来配置小程序及其页面是否允许微信索引，默认所有页面都可以被微信索引，其配置内容如下，
{"rules":[{"action": "allow","page": "*"}]
}
组件
  • view
  • image
  • input
    Chrome浏览器里，input的display属性值是inline-block；
    微信开发者工具里，input的display属性值是block。

    • placeholder
      输入框为空时的占位符
    • placeholder-class
      指定placeholder的样式
  • scroll-view
    可滚动视图区域。
    纵向滚动时，需要给该组件设置height。

    • scroll-x
      是否允许横向滚动，true则可横向滚动，false则不可横向滚动，默认false。
    • scroll-y
      是否允许纵向滚动，true则可纵向滚动，false则不可纵向滚动，默认false。
    • upper-threshold
      距离顶部多远时，触发scrolltoupper事件；
      单位默认是px。
    • lower-threshold
      距离底部多远时，触发scrolltolower事件；
      单位默认是px。
    • bindscrolltoupper
      绑定事件，bind+事件名；
      bindscrolltoupper，绑定scrolltoupper事件处理函数；
      滚动到顶部时，触发scrolltoupper事件。
    • bindscrolltolower
      绑定事件，bind +事件名；
      bindscrolltolower，绑定scrolltolower事件处理函数；
      滚动到底部时，触发scrolltolower事件。
    • scroll-into-view
      <scroll-view></scroll-view>中某个子元素的id，可实现自动滚动至某元素。
<scroll-view class="container" scroll-y="{{true}}"upper-upper-threshold="10"lower-threshold="10"bindscrolltoupper="handleScrollToUpper"bindscrolltolower="handleScrollToLower"scroll-into-view="{{toView}}"></scroll-view>
API

  • wx.showNavigationBarLoading()
    显示导航条加载动画

  • wx.hideNavigationBarLoading()
    隐藏导航条加载动画

  • wx.showToast()
    显示消息提示框。

    • title
      消息的内容，这是消息框唯一的必填项 ，且最多显示7个汉字。
    • icon
      图标，有以下三个值可选：
      "success"，成功图标；
      "loading"，加载图标；
      "none"，不显示图标
    • image
      自定义图标，优先级高于icon
    • duration
      提示框显示多长时间，单位是ms。
    • mask
      是否显示透明蒙层，防止触摸穿透。
      true则显示，false则不显示。

  • wx.navigateTo()
    保留当前页面，跳转到应用中的其他页面。
    注意哈，其他页面的路径需要在app.json中定义 。

  • wx.createSelectorQuery()
    返回一个SelectorQuery对象实例。

    • SelectorQuery.exec(function(res){})
      执行所有请求，请求结果会依次放入数组，该数组会在回调函数的第一个参数中返回。
<!-- index.wxml -->
<view class="container"><view class="content">hello world</view>
</view>

// index.js
Page({onLoad:function(){const query = wx.createSelectorQuery();query.select(".container").boundingClientRect();query.select(".content").boundingClientRect();query.exec(function(res){console.log(res);const {width,height,left,right,top,bottom} = res[0];console.log("width:",width);console.log("height:",height);console.log("left:",left);console.log("right:",right);console.log("top:",top);console.log("bottom:",bottom);})}
})

调试

  • 过滤WAService日志

【微信小程序】知乎小demo相关推荐

  1. 微信小程序入门教程+案例demo

    微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,--微信小程序开发也就那么回事.你只需要 ...

  2. 微信小程序的考勤管理Demo，包括前后端及数据库等内容

    这是一个微信小程序的考勤管理Demo,包括前后端及数据库等内容.如有错误或建议,欢迎指出. 前端:微信小程序框架 后端:koa框架基于express的新一代框架 文件:url80.ctfile.com ...

  3. 微信小程序引入高德地图Demo 快速上手

    文章目录 前言 一.获取高德key 二.引入官方实例 总结 前言 本文参照官方文档进行编写 最后引入官方实例 最终效果 ` 一.获取高德key 注册账号 https://lbs.amap.com/?r ...

  4. 微信小程序：实现计算器-Demo+与发布（编程运算计算器）

    微信小程序:实现计算器-Demo+与发布(编程运算计算器(可以微信小程序直接搜索)) 基本运算符与逻辑运算符,任意进制转换,上不封顶 微信小程序源代码下载:资源下载 使用了JS进制转换接口:JS实现万 ...

  5. 一键搭建微信小程序开发环境 及demo运行（腾讯云上一键搭建node.js服务器环境，PHP，Java，.NET服务类似）

    一.首先准备下本地环境(本地就需要一个微信开发工具) 1.首先得有一个微信小程序账号,登陆微信小程序首页:mp.weixin.qq.com,点击右上角立即注册. 注册登陆后,首页填写一些小程序基本信息 ...

  6. 小程序源码下载[demo整理自github]

    微信小程序的火热程度大家都有所了解,也有很多牛人写了不错的小程序,今天ytkah就整理一些github上的小程序开源项目,源码可以直接下载来用,感兴趣的朋友赶紧去看看吧!以下小程序排名按star的数量 ...

  7. dedecms小程序插件升级到1.4.4（支持百度小程序，微信小程序，头条小程序，QQ小程序，支付宝小程序...）

    从2019年6月份开发到现在 dede织梦小程序插件已经升级到1.4.4版本,现在已经支持:微信小程序,百度小程序,头条/抖音小程序,QQ小程序,支付宝小程序. dedecms小程序插件目前主要的功能 ...

  8. 微信小程序-通知滚动小提示

    代码地址如下: http://www.demodashi.com/demo/14044.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.c ...

  9. 提高微信小程序的应用速度的常见方式有哪些? 小程序怎么实现下拉刷新? 简述微信小程序原理？ 小程序的发布流程（开发流程）分析下微信小程序的优劣势？小程序授权登录流程？ 小程序支付如何实现

    小程序部分常见面试题 提高微信小程序的应用速度的常见方式有哪些? 提高页面加载速度 用户行为预测 减少默认data的大小 组件化方案 分包预下载 小程序与原生App相比优缺点? 优点: 基于微信平台开 ...

  10. 微信小程序 php配置,微信小程序 教程之小程序配置

    微信小程序――配置 以下就是小编对小程序配置的资料进行的系统的整理,希望能对开发者有帮助. 我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置 ...

最新文章

  1. 记录一个海思TOE的BUG
  2. [Luogu 3258] JLOI2014 松鼠的新家
  3. 数据结构数组计算机中的应用,2018考研计算机：数据结构数组和广义表复习重点...
  4. Java Calendar类知识点总结
  5. 如何制作一款HTML5 RPG游戏引擎——第三篇，利用幕布切换场景
  6. j2EE+mysql的一点总结
  7. 安装程序无法验证产品密钥解决方案
  8. html页面自动登录,抓取网页时自动登录和自动输入验证码
  9. 启动程序时提示缺少mfc.dll
  10. 无效的m3u8怎么办_m3u8视频不能播放的问题
  11. 四级网络工程师笔记-计算机网络（中）
  12. js鼠标经过切换图片
  13. 【青少年编程】【二级】小瓢虫找妈妈
  14. 4种最适合零基础入门的编程语言排行榜
  15. Python凯撒密码解密
  16. Nginx+keepalived双主配置(双机双主热备)
  17. ROS分布式多机通信
  18. C++循环语句使用（while for do while）及break continue goto的使用
  19. 视频号无人直播怎么弄？微信视频号无人直播教程【无需软件】
  20. 会员计费系统c语言_c语言课程设计报告会员卡计费系统源代码.doc

热门文章

  1. linux mine游戏,【Pyramid】Pocketmine开服（win、linux、安卓）日常维护详细教程
  2. 越南是下一个电商天堂——扬帆牧哲
  3. 在c语言中nextarc是什么意思,c语言求解多段图〔向前处理法〕.docx
  4. 电力系统：节点导纳矩阵的稀疏存储（稀疏矩阵）——C语言十字链表实现
  5. 10分钟学会简笔小插画，好玩的根本停不下来！
  6. Rmq https://blog.csdn.net/qq_44858230/article/details/114881302
  7. python里面执行sh命令
  8. 电销机器人没有薪水和假日的电销员工
  9. 计算机没有u盘权限,U盘复制文件时提示没有访问权限的解决方法
  10. 2012铁路春运伤不起节后返程最高峰