b站显示自己关注的up谁在直播

wwwwwllllk

默认只显示9个每次都得点更多，很麻烦。脚本里面可以看到前面的29个人。

// ==UserScript==
// @name         bilibili查看关注的up谁在直播
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  默认显示9个太少了，每次看也很麻烦
// @author       You
// @match        https://t.bilibili.com/*
// @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net.cn
// @grant        unsafeWindow
// @run-at document-start
// @grant        GM_addStyle
// @connect      api.live.bilibili.com
// @grant        GM_xmlhttpRequest
// ==/UserScript==

function request(){
  return new Promise((resolve, reject) => {
    GM_xmlhttpRequest({
      url:"https://api.live.bilibili.com/xlive/web-ucenter/user/following?page=1&page_size=29",
      method :"GET",
      headers: {
          "cookie": document.cookie
      },
      onload:function(xhr){
          let res = JSON.parse(xhr.responseText)
          // 拿到关注up的list
          resolve(res.data.list)
      }
    });
  })
}

function createDiv() {
  var div = document.createElement("div");
  div.setAttribute('class', 'upList')
  document.body.append(div)
}

function createUpListDate(){
  var ol = document.createElement("ol");
  ol.setAttribute('class', 'upListOl')
  request().then((res) => {
    console.log(res);
    res.map((item,index) => {
       if(item.live_status == 1) {
        index = index + 1
        ol.innerHTML += '<li>' + index + '.' + item.uname + ' ' + '正在直播' + '</li>'
       }

    })
    document.getElementsByClassName("upList")[0].append(ol)
  })
}

setTimeout(() => {
  createDiv()
  createUpListDate()
}, 2000)

GM_addStyle(`
    .upList {
      position: fixed;
      background: skyblue;
      top:80px;
      right:5px;
      width: 200px;
      z-index: 999;
      opacity:0.8;
    }
    .upListOl {
        list-style-type: none;
    }
`)

下面是用vue写的，写的有问题，但是找不到什么原因，在脚本里面渲染不出来，不知道那一块写错了，求大佬指点。我写到请求调用里面就不渲染了，不知道是什么问题。还有就是app挂载这一块没怎么搞清除，然后就是导致样式重叠我改了id=app的名字页面就不渲染了，头疼。

// ==UserScript==
// @name         shabi
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  为了方便看道总的文章，要不然绝逼不写。首先我们需要第一次把所有的页面先点击一次。只需要一次。然后存储到localStorage。之后就不需要。点开直接看就好了
// @author       You
// @match        https://t.bilibili.com/
// @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net.cn
// @grant        unsafeWindow
// @run-at document-start
// @grant        GM_addStyle
// @connect      api.szfx.top
// @grant        GM_xmlhttpRequest
// ==/UserScript==

// 引入vue3.js
let script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.src = "https://cdn.jsdelivr.net/npm/vue@next";
document.documentElement.appendChild(script);

window.onload=()=>{
  let text=`<div id="app">
      <button @click='update'>点击</button>
      <ol >
        <li v-for="(item, index) in upListCollection ">
            <Fragment>
               {{item.uname}}
               <Fragment v-if="item.live_status === 1">
                  正在直播
              </Fragment>  
              <Fragment v-else>
                  关播状态
              </Fragment>  
            </Fragment>  
        </li>
      <ol>  
  </div>`

  var el=document.createElement('div')
  // el.setAttribute("class", "upList");
  el.innerHTML=text;
  document.body.append(el)
  const App = {
    data() {
      return {
        upListCollection: [],
      };
    },
    methods: {
        setUpList(){
          this.request().then((res) => {
            this.upListCollection = res
          })
        },
        request(){
          return new Promise((resolve, reject) => {
            GM_xmlhttpRequest({
              url:"https://api.live.bilibili.com/xlive/web-ucenter/user/following?page=1&page_size=29",
              method :"GET",
              headers: {
                  "cookie": document.cookie
              },
              onload:function(xhr){
                  let res = JSON.parse(xhr.responseText)
                  // 拿到关注up的list
                  resolve(res.data.list)
              }
            });
          })
        },
        update() {
          console.log(this.upListCollection);
        } 
    },
    mounted:function(){
      this.setUpList();//需要触发的函数
    }
  };
  const app = Vue.createApp(App);
  app.mount("#app");
}

GM_addStyle(`
   .app {
    position: fixed;
    background: skyblue;
    top:30px;
      right:5px;
    width: 200px;
    height: 200px;
    z-index: 999;
   }

`)

wwwwwllllk

这就很nice了

李恒道

感觉哥哥可以在css优化下界面~

wwwwwllllk

李恒道 发表于 2022-8-15 03:36
感觉哥哥可以在css优化下界面~

道哥帮忙看看为啥vue不行呗，看下哪里写错了

李恒道

wwwwwllllk 发表于 2022-8-15 20:12
道哥帮忙看看为啥vue不行呗，看下哪里写错了

vue3有一点小问题
你要使用论坛的版本或者使用eval包装

wwwwwllllk

李恒道 发表于 2022-8-15 21:12
vue3有一点小问题
你要使用论坛的版本或者使用eval包装

但是我之前写得一个脚本也是这样用得

李恒道

wwwwwllllk 发表于 2022-8-15 21:44
但是我之前写得一个脚本也是这样用得

如果是none情况下是没问题的
沙盒存在这个问题