直播系统代码，实现Uniapp中的自定义按钮跳转

直播系统代码，实现Uniapp中的自定义按钮跳转

在index页面中，我们需要添加两个自定义按钮，分别为“跳转到page1页面”和“跳转到page2页面”。具体代码如下：

 

<template>
  <view class="container">
    <view class="btns">
      <view class="btn" @click="toPage1">跳转到page1页面</view>
      <view class="btn" @click="toPage2">跳转到page2页面</view>
    </view>
  </view>
</template>
 
<script>
  export default {
    methods: {
      toPage1() {
        uni.navigateTo({
          url: '/pages/page1/page1'
        })
      },
      toPage2() {
        uni.navigateTo({
          url: '/pages/page2/page2'
        })
      }
    }
  }
</script>
 
<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .btns {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .btn {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
  }
</style>
 

​

通过上面的代码，我们在页面中成功添加了两个按钮，并实现了点击按钮跳转到page1和page2页面的功能。

 

最后，在page1页面中，我们可以添加一个返回按钮，返回到index页面。具体代码如下：

 

 

<template>
  <view class="container">
    <view class="title">这是page1页面</view>
    <view class="btn" @click="back">返回</view>
  </view>
</template>
 
<script>
  export default {
    methods: {
      back() {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>
 
<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
  }
  .btn {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
  }
</style>
 

 

通过上面的代码，我们在page1页面成功添加了返回按钮，并实现了点击按钮返回到index页面的功能。

 以上就是直播系统代码，实现Uniapp中的自定义按钮跳转， 更多内容欢迎关注之后的文章