微信小程式仿系統自帶下拉重新整理效果

接下來就是直接看**了

首先是布局檔案：

// wxml布局檔案

'height:100%' scroll-y=
'}' bindscroll=
'scorll'
>
='column' bindtouchstart=
'start' bindtouchend=
'end' bindtouchmove=
'move'
>
//去掉原來的重新整理view
'height:}px'
class
='freshview'
>
='dot' style=
'opacity:}'
/>
='dot' style=
'opacity:}'
/>
='dot' style=
'opacity:}'
/>
<
/view>
='item' wx:
for=
'}'>
='title'
>
}<
/view>
='bottom'
>
新華網<
/view>
='comment'
>
2344評<
/view>
<
/view>
<
/view>
<
/view>
<
/scroll-view>

// js檔案

var sy;
component(,
/**   * 元件的初始資料
*/data:
,  lifetimes:
,    moved:
function()
,    detached:
function()
,    ready:
function()
)}else
if(that.data.opacity2 ==
1.0))}
else
if(that.data.opacity3 ==
1.0))}
}.bind
(this),
200)}}
,/**
* 元件的方法列表
*/methods:
,move
(e)if
(this
.data.scrolltop <=0)
)}var tempdelta =
0        console.
log(
'hei : '
+this
.data.hei)
if(delta >0)
)            tempdelta =
this
.data.hei + delta /
(this
.data.hei -50)
//增大阻尼
}else
)            tempdelta =
this
.data.hei + delta
}}else
this
.setdata()
}this
.setdata()
}'hei : ' + this.data.hei)
sy = e.touches[0]
.clienty
},end
(e))
this
.setdata()
settimeout
(function()
)},3000)}
else)}
},scorll
(e))}}}})

// wxss檔案

.item 
.title 
.bottom 
.comment 
.column 
.refresh 
.freshview
.dot

看效果圖已經基本達到了我們的要求，但是在沒有下拉的時候，三個小圓點還是會顯示一點出來，是乙個小瑕疵，所以我們再wxml中稍微坐下修改。

// wxml布局檔案

'height:100%' scroll-y=
'}' bindscroll=
'scorll'
>
='column' bindtouchstart=
'start' bindtouchend=
'end' bindtouchmove=
'move'
>
//去掉原來的重新整理view
'height:}px'
class
='freshview' hidden=
'}'>
//沒有下拉的時候隱藏重新整理view，增加此句**
='dot' style=
'opacity:}'
/>
='dot' style=
'opacity:}'
/>
='dot' style=
'opacity:}'
/>
<
/view>
='item' wx:
for=
'}'>
='title'
>
}<
/view>
='bottom'
>
新華網<
/view>
='comment'
>
2344評<
/view>
<
/view>
<
/view>
<
/view>
<
/scroll-view>

微信小程式下拉重新整理

使用了幾個方案，發現幾個注意點需要注意一下 方案一 整個布局只使用乙個scroll view，類目和列表放到該控制項下，這種狀態下重新整理可以，但是類目不能固定在頂部 方案二 整個布局使用乙個scroll view，裡面再巢狀使用scroll view，這種狀態下上拉幅度大的時候也會觸發下拉重新整理...

微信小程式 下拉重新整理

步驟一注意 enablepulldownrefresh 允許下拉重新整理 backgroundtextstyle 重新整理動畫中那個點的顏色 ios 值可以為dark light 步驟二 js檔案配置 頁面相關事件處理函式 監聽使用者下拉動作 onpulldownrefresh function 下...

微信小程式下拉重新整理

一 配置需要下拉重新整理的頁面的json檔案 enablepulldownrefresh true,函式 頁面相關事件處理函式 監聽使用者下拉動作 onpulldownrefresh function 二 onpulldownrefresh對scroll view元素不起作用 針對scroll vi...