scrollview自定义下拉刷新如何更改加载动画？

[erlongshr]

相关平台

微信小程序

小程序基础库: 2.19.3
使用框架: React

复现步骤

scroll-view 自定义下拉刷新示例
在开发者工具中预览效果

小程序官方文档有示例代码如下
<scroll-view scroll-y> <view slot="refresher">自定义刷新动画</view> <scroll-view/>
view slot="refresher"里的内容可以替换自带的3个点的下拉刷新动画
taro这么写没有效果
<ScrollView scrollY> <View slot="refresher"> 自定义刷新动画 </View> </ScrollView>

期望结果

如果更改scrollview自定义下拉刷新的动画效果

实际结果

对照小程序文档写法无效

环境信息

👽 Taro v3.0.5

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating

  Taro CLI 3.0.5 environment info:
    System:
      OS: macOS 10.15.7
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 14.14.0 - /usr/local/bin/node
      npm: 6.14.8 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.0.5 => 3.0.5 
      @tarojs/mini-runner: 3.0.5 => 3.0.5 
      @tarojs/react: 3.0.5 => 3.0.5 
      @tarojs/runtime: 3.0.5 => 3.0.5 
      @tarojs/taro: 3.0.5 => 3.0.5 
      @tarojs/webpack-runner: 3.0.5 => 3.0.5 
      babel-preset-taro: 3.0.5 => 3.0.5 
      eslint-config-taro: 3.0.5 => 3.0.5 
      react: ^16.10.0 => 16.14.0 
      taro-ui: 3.0.0-alpha.3 => 3.0.0-alpha.3 

wangpengfei@wangpengfeideMacBook-Pro mini-mall % 

---

补充信息

自定义下拉刷新动画效果

[github-actions]

等待热心的小伙伴解决问题中..., 有一些相关的 issues 可能帮助到你!

• scrollView下拉刷新动画错位
• 自定义tabbar无法使用
• 自定义微信小程序底部导航栏不显示

Thank you so much!

[erlongshr]

没有官方人员回答这个问题吗？现在我只能混合原生开发，我想知道是不是Taro的写法跟原生不一样？这样省去很多麻烦

[Chen-jj]

slot 有点不一样，参考试试：https://docs.taro.zone/docs/hybrid#%E4%BD%BF%E7%94%A8-slot

[erlongshr]

slot 有点不一样，参考试试：https://docs.taro.zone/docs/hybrid#%E4%BD%BF%E7%94%A8-slot
试过了，这个是定义slot而官方文档那个是使用

[erlongshr]

slot 有点不一样，参考试试：https://docs.taro.zone/docs/hybrid#%E4%BD%BF%E7%94%A8-slot

<ScrollView scrollY style={{width: '100%', height: '400px'}} refresher-enabled={true} refresher-threshold={80} enhanced={true} bounces={true} refresher-default-style="none" > <View> <Slot name='refresher'> <View>Hello world</View> </Slot> </View> </ScrollView>
name是refresher吗？这样写被当成普通元素渲染了

[Chen-jj]

就是用的 <Slot> 进行插槽，不过目前 <Slot> 不支持设置 style，下个版本支持。

例子：

import { useState, useCallback } from 'react'
import { View, ScrollView, Slot } from '@tarojs/components'

export default function () {
  const scrollStyle = {
    height: '150px'
  }
  const vStyleA = {
    height: '150px',
    'background-color': 'rgb(26, 173, 25)'
  }
  const vStyleB = {
     height: '150px',
    'background-color': 'rgb(39,130,215)'
  }
  const vStyleC = {
    height: '150px',
    'background-color': 'rgb(241,241,241)',
    color: '#333'
  }
  function onScroll (e) {
    console.log(e.detail)
  }
  return (
    <ScrollView
      className='scrollview'
      scrollY
      style={scrollStyle}
      onScroll={onScroll}
      refresherEnabled
      refresherDefaultStyle='none'
      refresherBackground="lightgreen"
    >
      <Slot name='refresher'  style="display: block; width: 100%; height: 80px; background: blue; display: flex; align-items: center;">
        <View style="position: absolute; text-align: center; width: 100%;">
          下拉刷新
        </View>
      </Slot>
      <View style={vStyleA}>A</View>
      <View style={vStyleB}>B</View>
      <View style={vStyleC}>C</View>
    </ScrollView>
  )
}

[erlongshr]

就是用的 <Slot> 进行插槽，不过目前 <Slot> 不支持设置 style，下个版本支持。

例子：

import { useState, useCallback } from 'react'
import { View, ScrollView, Slot } from '@tarojs/components'

export default function () {
  const scrollStyle = {
    height: '150px'
  }
  const vStyleA = {
    height: '150px',
    'background-color': 'rgb(26, 173, 25)'
  }
  const vStyleB = {
     height: '150px',
    'background-color': 'rgb(39,130,215)'
  }
  const vStyleC = {
    height: '150px',
    'background-color': 'rgb(241,241,241)',
    color: '#333'
  }
  function onScroll (e) {
    console.log(e.detail)
  }
  return (
    <ScrollView
      className='scrollview'
      scrollY
      style={scrollStyle}
      onScroll={onScroll}
      refresherEnabled
      refresherDefaultStyle='none'
      refresherBackground="lightgreen"
    >
      <Slot name='refresher'  style="display: block; width: 100%; height: 80px; background: blue; display: flex; align-items: center;">
        <View style="position: absolute; text-align: center; width: 100%;">
          下拉刷新
        </View>
      </Slot>
      <View style={vStyleA}>A</View>
      <View style={vStyleB}>B</View>
      <View style={vStyleC}>C</View>
    </ScrollView>
  )
}

不行，slot里的内容应该是下拉的时候才显示这样写一开始就显示了。

[Chen-jj]

就是用的 <Slot> 进行插槽，不过目前 <Slot> 不支持设置 style，下个版本支持。

因为 style 的问题

[erlongshr]

就是用的 <Slot> 进行插槽，不过目前 <Slot> 不支持设置 style，下个版本支持。

因为 style 的问题
也就是说这个版本要实现只能用原生了是吗

[Chen-jj]

可以把 dist/base.wxml 的 slot 模板改一改先试试有没其它问题，今天会发版

<template name="tmpl_0_slot">
  <view slot="{{i.name}}" style="{{i.st}}" class="{{i.cl}}"  id="{{i.uid||i.sid}}" data-sid="{{i.sid}}">
    <block wx:for="{{i.cn}}" wx:key="sid">
      <template is="{{xs.e(cid+1)}}" data="{{i:item,l:l}}" />
    </block>
  </view>
</template>