ng-tv-focusable

置顶 已于 2022-12-27 16:50:42 修改
阅读量1.6k 收藏 3
点赞数
分类专栏： angular 文章标签： angular2
于 2020-11-02 13:01:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sllailcp/article/details/109445268
版权

ng-tv-focusable

简介

tv-focusable 是适用于在 TV 端进行网页开发时管理焦点移动的框架，以简洁的 Api 让前端网页开发就像 android 开发一样自动管理焦点。
在这里插入图片描述
更多案例展示
vue-tv-focusable
react-tv-focusable

安装

npm i ng-tv-focusable

如何使用

app.module.ts中添加如下代码

 // app.module.ts
import { TvFocusableModule } from 'ng-tv-focusable';
@NgModule({
  declarations: [...],
  imports: [
    ...,
    TvFocusableModule
  ],
  ...
  bootstrap: [AppComponent]
})
设置元素可获取焦点
<div [ng-focusable]>可获取焦点的元素</div>
<div>不可获取焦点的元素</div>

跟 android 很相似了吧~
给非 android 开发的同学普及一下，在进行 android 的 TV 端开发时，系统是会自动给 focusable=true 的元素分发焦点的，例如：

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusable="true" />
    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusable="true" />

假设这两个元素是左右排列的，当焦点在前面一个 text1 上时，按遥控器的右键，焦点会自动跑到 text2 上。
现在在网页标签上设置 [ng-focusable] 就相当于 android 上设置了 android:focusable=“true”，当用户按遥控器时，该库会像 android 那样自动把焦点移动到下一个焦点上，无需开发者处理。
别急，现在还看不到焦点效果，因为你还没设置聚焦的样式呢。

设置焦点的样式

聚焦的元素会被加上一个 class="focus" (你可以自己定义 className，默认为 focus)，现在你应该知道要做什么了，给 focus 设置个独特的样式就好了。
例如这样：

<div class="demo">
    <span 
    *ngFor='let in of counter(60) ;let i = index' 
    class="span" [ng-focusable]>
      {{i+1}}
    </span>
  </div>
...
.focus {
  transform: scale(1.1);
  border: 2px solid red;
  box-shadow: 0 0 20px red;
}

在这里插入图片描述

好了，这样就设置完了，现在你按方向键时焦点就会自动移动到下一个目标元素上了，很简洁吧~

指定焦点移到到某一个元素上

上面的演示中，最开始时第一个元素获取了焦点，实际上你在使用时，库并不会在页面渲染完成后主动帮你聚焦到第一个或某个元素上，这个由你自己来指定似乎更加合适，你可以用下面的方法来指定焦点移动到某个元素上：

import { $tv } from 'ng-tv-focusable';
$tv.requestFocus(Element,bool); // Element 必填； bool 非必填，默认为true

关于第二个参数，设置聚焦时是否需要滚动动画，默认 true 带动画，如果指定的聚焦元素不在窗口可视区域内或未完全显示，聚焦后就会被滚动到可视区域内，有些场景下你可能并不想要动画，例如类似 “回到顶部” 的场景，就需要用到这个了，试一下看看吧~
例如：

<div class="box">
    <div class="item">s</div>
</div>
...
import { $tv } from 'ng-tv-focusable';
$tv.requestFocus($tv.getElementByPath('//div[@class="box"]/div[1]'));

至于如何获取 Element 就不再展开了，ng-tv-focus提供了 xpath 获取Element：

$tv.requestFocus($tv.getElementByPath('//div[@class="demo"]/div[2]'));// 让demo下的第2个div 聚焦

一般 TV 端的页面在刚加载完成时，产品都会要求让某一个元素聚焦的，这时你就用上这条 api 了。
注意： 进入页面时想让某个元素聚焦，要在 ngAfterViewInit 回调中进行，否则会因页面未加载完全而导致焦点移动并不如你所愿。

XPath 获取 DOM—getElementByPath(string)

ng-tv-focusable 提供了 xPath 的方式获取

<body>
    <div class="content">
        <span class="item1">1</span>
        <span class="item2">2</span>
        <span class="item3">3</span>
    </div>
</body>
$tv.getElementByPath('//div[@class="content"]/span[2]');
$tv.getElementByPath($tv.readXPath(document.querySelector('.item2')));
//结果: <span class="item2">2</span>
根据 DOM 反向获取 XPath 路径 —readXPath(el)

ng-tv-focusable 根据 DOM 反向获取 XPath 路径

<body>
    <div class="content">
        <span class="item1">1</span>
        <span class="item2">2</span>
        <span class="item3">3</span>
    </div>
</body>
$tv.readXPath(document.querySelector('.item2')) 
$tv.readXPath($tv.getElementByPath('//div[@class="content"]/span[2]');) 
//结果: "/html/body/div[1]/span[2]"
自定义焦点移动

框架有自己的一套找焦点算法，但有时产品要求你在某个元素上按遥控器右方向键时，让屏幕左下角的某个该死的元素聚焦，那你就要根据产品需求文档来自定义焦点移动了。
可以使用 (up)，(right)，(down)，(left) 这几个属性来指定按遥控器对应方向键时调用的方法，然后自己在方法里通过 next 或 requestFocus（1.x只支持此方法） 让目标元素聚焦;

1.x写法
如果你在自己的方法里调用了 requestFocus 方法，该库将不再执行默认的焦点移动操作，否则依然帮你执行默认的焦点移动。
示例：

<div class="wrapper">
  <div class="focus-item" [ng-focusable] *ngFor='let in of counter(100) ;let i = index'  (down)="down(i)">
</div>
...
  down(index: number) {
    if (index === 2) { //在第2个div上按下方向键时，焦点直接移动到第30个div上
      $tv.requestFocus($tv.getElementByPath('//div[@class="wrapper"]/div[30]'));
    }
  }

2.x写法
只要你在标签上定义了方向键监听例如(left)，那么在此标签上按左键时该库将不会再执行默认的向左焦点移动操作，你可以通过如下用法来移动焦点：

<div class="wrapper">
  <div class="focus-item" [ng-focusable] *ngFor='let in of counter(100) ;let i = index'  (left)="left(i)">
</div>
...
    left(index: number) {
        if (index === 2) { 
            //和requestFocus功能是一样的,推荐使用next
            $tv.next($tv.getElementByPath('//div[@class="wrapper"]/div[30]'))
            //或者如果你想在处理一些事情之后再执行库的默认移动
            setTimeout(() => {
                $tv.next("left")
            }, 500);
        }
    }

在这里插入图片描述
推荐使用 2.x 的监听，可同时支持同步和异步流程，1.x只支持同步流程。

表单控件，按确定键进行填写
// formAutofocus：默认true
 $tv.formAutofocus=false；// 不可以输入
 $tv.formAutofocus=true；// 可以输入

在这里插入图片描述

好啦，到这里应该能满足基本所有的 TV 焦点需求了。

你还在看？？？
好吧，或许你还有一些别的需求~

其它

初始化

可以在全局或某个页面上配置属性

  // 初始化配置
  // 全局配置可在app.component.ts中
  // 1.使用init同时配置多个属性
  import { $tv } from 'ng-tv-focusable';
  $tv.init({
     focusClassName: "on-focus", // 聚焦元素的className （默认focus）
     KEYS: {
      KEY_LEFT: [37, 21], 
      KEY_UP: [38, 19], 
      KEY_RIGHT: [39, 22], 
      KEY_DOWN: [40, 20],
      KEY_ENTER: [13, 23]
     }, // 自定义键值
     longPressTime: 800, // 长按响应时间（单位：毫秒），默认500ms
     distanceToCenter: false // 使焦点始终在可视范围的中间部分，默认false
    });


// 2.单独配置初始化
  $tv.KEYS=  {
    KEY_LEFT: [37, 21], 
    KEY_UP: [38, 19], 
    KEY_RIGHT: [39, 22], 
    KEY_DOWN: [40, 20],
    KEY_ENTER: [13, 23]
  };  
 $tv.longPressTime= 800;

**警告：**为了不影响通用配置，如果对某页面进行了一些特殊配置，请记住在销毁页面时重置它

ngAfterViewInit(){
    $tv.findFocusType=0  ;   
}
ngOnDestroy() {
    $tv.resetFindFocusType(); //$tv.findFocusType  = 1;
}

上面只是列举了几个常用且一般是设置成整个项目所有页面通用的属性，可在文档最下方查看所有可配置属性，如果不需要定制属性，无须初始化。
通常情况下，默认属性就能满足大部分项目的需求。

下面是几个常用属性使用场景的举例说明：

自定义焦点 class（focusClassName）

你接手了别的组的项目，他们已经把 focus 这个词作为普通 className 给用了，而且很多地方都用到了，你一定不愿意把他们的代码里的 focus 改成 focus1,focus2 什么的，以使你可以正常使用该库的 focus 这个名字作为焦点样式。
那就通过初始化里的 focusClassName 属性重新定义一下该库的焦点样式名吧。

自定义键值（KEYS-配置上下左右，enter键值）

不同厂家的遥控器键值可能不一样，有些并未按照 android 键值来实现，而且产品可能要求同时支持遥控器和键盘操作，这时你就需要指定上下左右方向键值了，例如上面配置的 KEY_LEFT: [37, 21] 就是支持键盘上的左箭头键和遥控器左方向键。

自定义找焦点方式（findFocusType，initDis）

findFocusType=1，即默认找最近焦点方式，用默认方式时实际上用不到 initDis 参数
在这里插入图片描述

findFocusType=0，initDis = 49
在这里插入图片描述

initDis 为何是 49？只要下一个 div 的横向中心线和当前焦点元素的中心线距离大于 initDis 值，就认为它和当前焦点不在同一水平线上，现在 div2 的横向中心线比 div1 高了 50px，所以如果你不想让用户在 div1 上按右方向键时焦点跑到 div2 上，就可以设置找焦点方式为直线模式，并通过 initDis 来控制偏差范围。

边缘距离（offsetDistance）

到达边缘的时候,给焦点和边缘一个距离.
当某个未完全显示在窗口可视区域内的元素聚焦时，该库会自动帮你将这个元素滚动到窗口内完全显示，不过默认状态是贴着边缘的，如果你想让它离这个边缘有一个距离，就可以通过这个属性实现了。

$tv.offsetDistance = 50 // 完全显示出来后再距离边缘50像素

如图:
在这里插入图片描述

局部滚动（setScrollEl/resetScrollEl）

TV 端网页大多是整个页面滚动，滚动条在浏览器窗口上，如果你的滚动内容是在整个页面的局部某一块，需要指定一下滚动容器。
setScrollEl(Element): 设置滚动的el
resetScrollEl()： 重置el，即滚动浏览器的滚动条
举个例子

<div class="demo">
    <div class="wrapper">
      <div class="focus-item" [ng-focusable] *ngFor='let in of counter(300);let i = index' :key="index">
        {{ i+1}}
      </div>
    </div>
</div>
<script>
  ...
  ngAfterViewInit() {
  	$tv.scrollEl=$tv.getElementByPath('//div[@class="demo"]');
  }
  ngOnDestroy() {
   // To avoid affecting the global configuration, reset the page when destroying it
    $tv.resetScrollEl();
  }
  ...
</script> 
<style>
  .demo {
    background:#ccc; margin: 0 auto; width: 400px; height: 400px; 
    position: relative; padding: 20px; overflow: hidden;
    .wrapper { width: 800px; }
    .focus-item {...}
  }
</style>

在这里插入图片描述

自定义事件
监听焦点状态

(onFocus)：获得焦点
(onBlur)：失去焦点

<div class="focus-item" [ng-focusable] *ngFor='let in of counter(105);let i = index' (down)="down(i)"
             (onFocus)="focus(i,$event)" (onBlur)="blur(i)">
    {{ i+1}}
</div>
...
  focus(index: number, event: any) {
    console.log(event.detail.el); //当前元素
    console.log('focus:' + index);
  }

  blur(index: number) {
    console.log('blur:' + index);
  }

不需要获取当前元素就不用传 $event 了。

点击

@click
按遥控器 OK 键（相当于手机上手指点击按钮，PC 上鼠标点击按钮）

<div class="focus-item" v-focusable (click)="click()">button</div>
...
click() {
    console.log('click'); 
}
长按

按下遥控器 OK 键超过 500ms 会触发长按事件，可通过 $tv.longPressTime 自定义这个时间
(longPress)

<div class="focus-item" [ng-focusable] (longPress)="longPress()">11</div>
...
  longPress() {
    console.log('longPress');
  }
方向按键

left,right,up,down
TV 端依靠遥控器按上下左右方向键来操作界面，可自定义方向事件监听,例如监听右键按键事件

<div class="focus-item" v-focusable (right)="right()">11</div>
...
right() {
    console.log('right'); 
}
设置属性/重置属性
// 重置成插件默认值，reset+属性名()，例如
$tv.resetScrollEl();
$tv.resetFocusClassName();

//清除所有配置并恢复到插件的默认配置
$tv.reset() 
...

// 独立配置init里面的每一项，$tv.属性名=xx, 如下：
$tv.focusClassName = XX;
$tv.offsetDistance = XX;
其它可能用到的方法

元素聚焦状态的全局监听- setOnFocusChangeListener

$tv.setOnFocusChangeListener((element, focus)=>{
    console.log("焦点状态改变的元素：" + element, "聚焦或失去焦点：" + focus)
})

让页面滚动到某个元素的位置

$tv.scrollTo({targetEl: document.querySelector("#page1")})

参数说明：
scrollEl：滚动区域，默认为 document,
targetEl：需要滚动到哪个元素,
isCenter：targetEl 是否滚动到屏幕居中的位置,
offset：距离滚动边界上下左右的偏移,
smooth：是否开启滚动动画,
duration：动画耗时，默认200毫秒

所有可配置项
属性
name描述默认值
itemAttrname可聚焦的属性名
$tv.itemAttrname= “myFocusable”;		focusable
focusClassName指定焦点元素类名
$tv.focusClassName = “myFocus”;		focus
findFocusType移动类型，1：就近查找 0：直线查找
$tv.findFocusType = 1;		1
initDis差值
$tv.initDis = 20;		20
KEYS上下左右的键值
$tv.KEYS = {…};		{ KEY_LEFT: [37, 21], KEY_UP: [38, 19], KEY_RIGHT: [39, 22], KEY_DOWN: [40, 20], KEY_ENTER:[13, 23] }
offsetDistance边缘距离（单位px）
$tv.offsetDistance = 50;		50
longPressTime长按响应时间（单位毫秒）
$tv.longPressTime = 500;		500
scrollEl设置可以滚动的el
$tv.scrollEl = ;		null
limitingEl整个界面，只有limitingEl内的焦点可以聚焦
$tv.limitingEl = ;		null
distanceToCenter焦点是否在滚动区域保持居中显示
$tv.distanceToCenter = true;		false
formAutofocus表单控件是否可以输入或者编辑
$tv.formAutofocus= false;		true
smoothTime滚动的动画时间
$tv.smoothTime= 200;		200
spacingTime滚动的动画帧数(数值越小，滚动动画帧数越多，动画更细腻，也会更耗性能)
$tv.spacingTime = 20;		20
scrollSpeedX控制水平方向按键速度（单位毫秒）,例如200ms内只执行一次按键事件
$tv.scrollSpeedX = 200;		0
scrollSpeedY控制垂直方向按键速度（单位毫秒）
$tv.scrollSpeedY = 200;		0
scrollSpeed控制水平和垂直方向按键速度（单位毫秒）
$tv.scrollSpeed = 200;		0
方法
name描述参数类型
next(el|str)执行聚焦操作，可传期望的目标元素或方向标识Element 或 string
requestFocus(el)执行聚焦操作，已在2.x被next取代Element
getElementByPath(str)使用xPath获取elementstring
readXPath(el)根据DOM反向获取XPath路径Element
resetScrollEl()重置成浏览器滚动–
resetFocusClassName()重置 focusClassName–
resetInitDis()重置 initDis–
resetFindFocusType()重置 findFocusType–
resetKEYS()重置 KEYS–
resetOffsetDistance()重置 offsetDistance–
resetLongPressTime()重置 longPressTime–
resetDistanceToCenter()重置 distanceToCenter–
resetScrollEl()重置 scrollEl–
resetLimitingEl()重置 limitingEl–
resetFormAutofocus()重置 formAutofocus–
reset()重置所有配置–
事件
name描述
up上移 (可配置KEY_UP修改键值)
right右移 (可配置KEY_RIGHT修改键值)
down下移 (可配置KEY_DOWN修改键值)
left左移 (可配置KEY_LEFT修改键值)
onFocus获取焦点
onBlur失去焦点
longPress长按 (可配置KEY_ENTER修改键值)， $tv.init.longPressTime可配置长按的时间，默认500ms
click按enter时可触发click(可配置KEY_ENTER修改键值)

案例源码请戳这里

榴莲不好吃
关注
专栏目录
v-focus功能
weixin_40945354的博客
09-07 420
<!DOCTYPE html> <body> <div id="app"> <input type="text" v-focus></input> </div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ data() { return {
vue开发android tv,vue-tv-focusable中文文档
weixin_42489104的博客
05-27 1048
文章目录简介下载使用1.设置元素可获取焦点2.设置焦点的样式3.指定焦点移到到某一个元素上4.自定义焦点移动其它1.提一下初始化2.监听焦点状态简介tv-focusable 是适用于在 TV 端进行网页开发时管理焦点移动的框架，以最简洁的 Api 让前端网页开发就像 android 开发一样自动管理焦点。下载npm i tv-focusable使用1.设置元素可获取焦点可获取焦点的元素不可获取焦点...
tvfocus:电视js框架
03-16
TVFocus指南 介绍 TVFocus是一个用于电视端，开发web应用程序的js框架。和其他框架类别，TVFocus专门处理电视端的光标问题，体积小效率高，可与其他框架搭配使用。 TVFocus不依赖其他框架或包，不依赖ES5 / 6的新特性。以安卓4.0为适应起点，能够兼容市表面绝大部分（webview）机顶盒。 安装 TVFocus支持js文件约会方式，和npm安装方式。 请在发布目录下载对应的版本。 使用npm： $ npm i-保存电视焦点 入门指引 TVFocus有点像是一个JS模板引擎。与其他模板引擎索引，TVFocus支持一种称为“ focus”的特殊标签，渲染时focus标签将会被渲染成普通的DIV元素，同时在内部生成一个FocusNode的对象（组件实例）。如果开发者有其他组件框架的使用经验，那么上手TVFocus还是比较容易的。 何谓focus focus就是焦
react-tv-focusable
榴莲不好吃的专栏
11-02 2114
文章目录简介安装使用方法使用说明,react-tv-focusable一共有以下几个方法;initgetElementByPath(string)requestFocus(el, isAnimation);setScrollEl(el) / resetScrollEl();reset自定义事件注意事项1.需要等到页面渲染完,才能获取到element2. $tv.resetXXX();所有可配置项案例源码请戳这里 简介 react-tv-focusable 是适用于在 TV 端进行网页开发时管理焦点移动的框架
vue-tvshows:使用Vue JS v2构建的应用，可显示美国的电视节目列表，并提供搜索功能，用户可以在其中搜索所需的电视节目
03-11
电视节目 使用Vue JS v2构建的应用，可以在美国显示电视节目列表，并提供搜索功能，使人们可以搜索自己想要的电视节目。 使用Vuex进行状态管理，并使用Vue路由器进行路由。 电视显示从获得的信息 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint
focusablejs
榴莲不好吃的专栏
11-02 1494
tv-focusable 是适用于在 TV 端进行网页开发时管理焦点移动的框架，以最简洁的 Api 让前端网页开发就像 android 开发一样自动管理焦点。
google-search-result-focusable:一个Google Chrome扩展程序，可通过Tab键和Enter键选择搜索结果
04-30
google-search-results-focusable 一个Google Chrome扩展程序，可通过Tab键和Enter键选择搜索结果。 开发 运行yarn build 在chrome://extensions/加载./build “未./build 发布 yarn build 将build.zip上传到...
focusable-selectors:一个微型库，可导出用于集中化HTML元素CSS选择器数组
05-04
重点突出的选择器 focusable-selectors是一个微型库，可为可... const selectors = require ( 'focusable-selectors' ) 要使用单个CSS选择器，请使用逗号将数组加入其中： const selector = selectors . join ( ','
Vue - 组件之间的通信
xiomarazark的博客
05-16 141
父子组件之间的通信 第一种通信方式 父组件向子组件通信 parent.vue <template> <Child name="希泽" :age="18"/> </template> <script> export default { name: "Parent", }; </script> child.vue <template> {{name}}--{{age}} </template> <script&g
treeview-select.zip
06-18
在IT领域，Bootstrap是一款广泛使用的前端开发框架，它极大地简化了网页设计和开发流程。"treeview-select.zip" 文件显然包含了使用Bootstrap实现的下拉导航树组件。这种组件通常用于网站或应用的菜单栏，它结合了...
原生TV端焦点处理框架 focus.js V1.0.9 前端 JS
m0_59093266的博客
12-20 2287
简单易上手开源原生TV端焦点以及事件框架，轻松玩转tv端需求
Android TV开发的焦点记忆 焦点移动到列表中的某一项中,焦点移出去,在回来时焦点还要定位到原来的item上
weixin_43721056的博客
11-01 1823
当焦点从 RecyclerView 上移出的时候，需要保存 RecyclerView 当前聚焦的 View ，下次 RecyclerVlew 将要获得焦点的时候，主动聚焦到上—次聚焦的 View 上。
vue-epg , 电视遥控器控制web 页面焦点
又是再见?
06-12 6899
需求: 电子看板, 菜单可以通过遥控操作切换; 项目本是基于 vue 构建的, 找了很久,通过 Google 才找到的, vue-epg 文档地址:https://www.kancloud.cn/koala-gc/vue-epg/758916 简单的使用方法直接摘过来: 1. 安装依赖 npm install vue-epg --save 2. main.js 中加入 // ...
TV端Android聚焦focus
七子笑的weBLOG
03-27 411
TV端Android聚焦focus GridView TV 自定义网格视图 Activity展示内容 ListView TV + 自定义文本视图 + WindowManager显示 自定义TextView 自定义ListView WindowManager布局显示 TV端Android聚焦focus GridView TV 自定义网格视图 packag...
Android TV 控件获取焦点特效
会飞的猫的博客
12-20 5081
最近开始接触TV端开发，初转入TV端，有好多不适应。尤其是对焦点的处理，上篇文章对
VUE 处理文本框获焦点高亮
weixin_30520015的博客
03-20 2700
先贴例子代码 这里又三个div对应的三个input输入框 <!-- 登录的表单 --> <div class="input_group" :class="{active:act_index===1}"> <label for="cm_code">公司编号:</label> ...
vue中文本框自动获取焦点
m0_50618406的博客
11-20 1517
在vue中要使文本框自动获取焦点可用如下代码实现 this.$nextTick(_ => { this.$refs.newKeywordInput.$refs.input.focus() }) 其中this.$nextTick是页面重新渲染完成之后才会执行的回调函数。 javascript执行机制可以查看参考这篇文章 js执行机制 ...
推荐项目：IofTV-Screen-Vue3 - 基于Vue3构建的电视屏幕管理应用
gitblog_00053的博客
03-31 464
推荐项目：IofTV-Screen-Vue3 - 基于Vue3构建的电视屏幕管理应用 IofTV-Screen-Vue3一个基于 vue3、vite、Echart 框架的大数据可视化（大屏展示）模板项目地址:https://gitcode.com/gh_mirrors/io/IofTV-Screen-Vue3 项目简介 是一个现代化的、基于Vue3框架的电视屏幕显示管理系统。它旨在帮助用户轻松地...
使用v-focus来让点击出来的input输入框获取焦点
最新发布
qq_43235503的博客
06-29 131
使用v-focus来让点击出来的input输入框获取焦点
Android技巧：利用focusable属性模拟底层按钮效果
"这篇博客主要讨论了Android中`focusable`属性的一个巧妙应用，即如何实现底层按钮的效果。作者通过分析百威啤酒客户端主界面的按钮设计，提出了一个假设，并通过实验验证了自己的观点。" 在Android开发中，`...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值