用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序 下拉刷新, 坑 ...

纸飞机 2018-3-6 16:11

分享者:xiaochun365,原文地址一:下拉刷新需求描述: 1.首先我的scroll-view部分是嵌套在template内 2.应用template的页面顶部还有一个日期选择picker且位置固定 3.下拉刷新当前页面template.wxml ... news. ...

分享者:xiaochun365,

原文地址

一:下拉刷新

需求描述:
1.首先我的scroll-view部分是嵌套在template内
2.应用template的页面顶部还有一个日期选择picker且位置固定
3.下拉刷新当前页面

template.wxml

  1. name="t1">
  2. class="news" scroll-y="true" upper-threshold="0" bindscrolltolower="toLowerLoadNews" bindscrolltoupper="toUpperLoadNews" style="height:{{newsPanelHeight}}px;">
  3. ...

news.wxml

  1. class="topPanel">
  2. class="timePicker" mode="date" value="{{dateValue}}" bindchange="datePickerBindchange" start="2017-01-01" end="{{dateTimeNow}}">时间:{{dateValue}}
  3. class="clockImg" src="../images/clock.png">
  4. class="refresh-block" style="height: {{refreshHeight}}px;" wx:if="{{refreshing}}">
  5. animation="{{refreshAnimation}}" src="../images/refresh.png">
  6. wx:else="{{reportList.length != 0}}">
  7. src="../templates/t1/t1.wxml" />
  8. is="t1" data="{{reportList,newsPanelHeight}}" />

news.js

  1. toUpperLoadNews: function (e) {
  2. console.log("下拉刷新了....")
  3. var that = this
  4. if (that.data.refreshing) return
  5. that.setData({ refreshing: true })
  6. updateRefreshIcon.call(that)
  7. //刷新请求
  8. utils_news.GetNews(function (result) {
  9. that.setData({
  10. reportList: result
  11. })
  12. setTimeout(function () {
  13. that.setData({
  14. refreshing: false
  15. })
  16. }, 3000)
  17. })
  18. }
  19. //下拉刷新图标旋转动画
  20. function updateRefreshIcon() {
  21. var deg = 0;
  22. var that = this;
  23. console.log('旋转开始了.....')
  24. //创建动画
  25. var animation = wx.createAnimation({
  26. duration: 1500
  27. })
  28. var timer = setInterval(function () {
  29. if (!that.data.refreshing)
  30. clearInterval(timer)
  31. animation.rotateZ(deg).step();//在Z轴旋转一个deg角度
  32. deg += 360
  33. that.setData({
  34. refreshAnimation: animation.export()
  35. })
  36. }, 500);
  37. }

二:

看到有人将scroll-top属性用在了scroll-x=true的scroll-view组件上,问题显而易见
scroll-top=”10”设置竖向滚动条位置
scroll-x=”true” 设置组件横向滚动
自己写了一个横向滚动的scroll-view scroll-x=true的组件,但是死活不滚动(我顶你个肺啊)

  1. scroll-x="true" style="background:black;height:110px; white-space: nowrap;">
  2. style="background: red; width: 200px; height: 100px; display: inline-block;">
  3. style="background: green; width: 200px; height: 100px; display: inline-block;">
  4. style="background: blue; width: 200px; height: 100px; display: inline-block;">
  5. style="background: yellow; width: 200px; height: 100px; display: inline-block;">
  • height:110px;:scroll-view 容器高度要设置,不然你的view无论设置多高,都只有一点点高度
  • width: 200px; height: 100px; 内部的view必须要设置宽高,不然是不现实的哦
  • white-space: nowrap;:white-space 属性设置如何处理元素内的空白
    normal 默认。规定段落中的文本不进行换行,空白会被浏览器忽略。
    pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
    nowrap 文本不会换行,文本会在在同一行上继续,直到遇到br 标签为止。
    pre-wrap 保留空白符序列,但是正常地进行换行。
    pre-line 合并空白符序列,但是保留换行符。
    inherit 规定应该从父元素继承 white-space 属性的值。

  • display: inline-block;:应用此特性的元素呈现为内联对象,周围元素保持在同一行

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏