先自己写出一个tabbar,然后在首页写入点击事件

例:home(我的首页),在wxml中

<button bindtap="toList">去list</button>
  <button bindtap="toIndex">去index</button>

在js中写入功能

Page({
  data: {

},
  toList(){
    // 编程式导航跳转至 非 tabbar 页面

wx.navigateTo(详细功能网站)({
      url: '/pages/list/list',
    })
  },
  toIndex(){
    // 正确的写法
    wx.switchTab({
      url: `/pages/index/index`,
    })
  }
)}

在写入的设置的index文件中可继续完成  分享  下拉刷新功能

在index wxml中

<view class="indexcpage">恭喜你跳转tabbar页面成功</view>

<button open-type="share">分享</button>

在js中

Page({
  data: {
  },  
 //onPullDownRefresh(详细功能位置)

onPullDownRefresh(){
    setTimeout(()=>{
      // 停止下拉刷新
      wx.stopPullDownRefresh()
    },1000)
  },
   * 页面上拉触底事件
   */
  onReachBottom: function () {
    console.log('滑动到底了')
  },

/**
   * 分享
   */
  onShareAppMessage: function () {
    console.log('分享')
  },
  onPageScroll(){
    console.log(1)
  }
})

list  wxml

<navigator url="/pages/info/info">去详情</navigator>

<view wx:for="{{arr}}"  bindtap="toInfo" data-lijian="{{item.id}}">

{{item.name}}</view>

js

Page({

/**

* 页面的初始数据

*/

data: {

arr: [

{

id: 1,

name:'凯隐'

},

{

id: 2,

name:'卡兹克'

},

{

id: 3,

name:'芮尔'

}

]

}

即可进入info页面

可以设置一个点击事件,返回首页

<button bindtap="backIndex">返回首页</button>

js

Page({

data: {

},

backIndex(){

wx.navigateBack({

delta: 12

})

}

微信小程序跳转页面,分享功能相关推荐

  1. 手机按三角返回页面上一页_小猿圈微信小程序跳转页面都有哪些?

    随着科技的进步互联网的发展,微信小程序逐渐成为了很多推广渠道的入口,但是因为很多做前端的小伙伴们不知道怎么去实现跳转页面,弄得不知所措,今天小猿圈前端讲师就给你讲解几种微信小程序跳转页面方法. 微信小 ...

  2. 微信小程序跳转页面问题

    微信小程序跳转页面的方式: 1.跳转至tabBar页面,并关闭其他所有非 tabBar页面 wx.switchTab({ url: '路径' //url同app.json中配置的tabBar路径 }) ...

  3. 微信小程序跳转页面带参数

    微信小程序跳转页面带参数 1.给参数赋值 2.跳转页面 3.在目的地页面的onload里打印即可得到上个页面带过来的参数 4.完整的带参跳转方法(js)

  4. 微信小程序 解决内层页面分享出去后 用户无法通过分享页面返回首页问题

    微信小程序 解决内层页面分享出去后 用户无法通过分享页面返回首页问题 本质就是设置一个变量isshare来判断是否是分享页面中进入的 data设置 isshare: 0,//不是分享页面进入 js o ...

  5. 移动端App分享,以及微信小程序和公众号分享功能实现

    移动端App分享,以及微信小程序和公众号分享功能实现 分享功能记录收藏,上链接 前端工作记录

  6. 微信小程序某一页面分享任意页面的小坑

    最近在做一个微信小程序,遇到的坑挺多的,究其原因还是对小程序的运行机制不是很了解,因此才会有这么多的坑,先记录一个刚解决的问题. 在微信小程序某一页面A中分享其他任意在app.json中定义的页面如B ...

  7. 微信小程序跳转页面的不同方法

    微信小程序如何进行页面切换呢? 一,使用声明式导航 1.对于tabbar页面的跳转(若不明白tabbar可自行百度) 使用switchTab进行跳转 在wxml中输入 <navigator ur ...

  8. 微信小程序跳转页面携带参数

    小程序跳转页面并携带参数,有两种情况,一是在wxml里通过navigator url跳转,一种是在js里通过点击事件跳转,下面案例为跳转详情页面 在wxml中: <view class='wai ...

  9. 小程序内嵌h5页面分享_微信小程序webview内页面分享

    因为项目原因,之前在微信小程序内部使用 webview 嵌套了 h5 页面,现在要添加一个新的功能,用户在哪个页面进行了分享,被分享的用户从链接进来就跳转到哪个分享页面. 先了解一下 web-view ...

最新文章

  1. ORACLE 12C PDB部分功能测试
  2. node - 非阻塞的异步 IO
  3. Vue组件中使用Sass或者Less全局变量
  4. HDU 4283:You Are the One(区间DP)
  5. 转: eclipse 快捷键列表(功能清晰版本)
  6. LeetCode移掉k位数字(贪心算法)python
  7. STL 之includes,set_intersection,set_union,set_difference,set_symmetric_difference
  8. ADAS(3) 各功能模块及解决方案提供商详解
  9. Navicat15安装笔记
  10. 用项目案例彻底理解Spring IOC容器
  11. Python使用傅里叶变换调整音频文件音量
  12. MySQL Data Manipulation Statements
  13. PyCharm安装步骤
  14. 怎么看公司财务报表?
  15. Linux系统管理员应该知道的20个系统监控工具
  16. 无线之minidwep-gtk
  17. python3下使用有道翻译网页版实现翻译功能~~~附源码
  18. dell笔记本外接显示器_戴尔笔记本怎么连接外接显示器?
  19. python interpreter配置_PyCharm使用之配置SSH Interpreter
  20. Ubuntu16.04 使用apt-get安装软件时无法自动安装所需要的依赖

热门文章

  1. 数据库(第一章习题和答案)
  2. 自定义一个仿Spinner
  3. 16---Day03-JDBC连接池-笔记++
  4. npm配置three.js
  5. 电容笔好还是触控笔好?超实惠电容笔排行
  6. 12个核心力量训练动作
  7. 实现算命测八字获取节日的工具类-Lunar
  8. web前端(JavaScript)
  9. Netty 教程 – ByteBuf详解
  10. TCP重传与超时机制:解锁网络性能之秘