精华内容
下载资源
问答
  • 使用 wx.navigateTo 进行路由跳转。保留当前页面,跳转到应用内的某个页面,无法跳转至 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。 wx.navigateTo({ url: '../base-contact/...在下个页面的 onlo...

    使用 wx.navigateTo 进行路由跳转。保留当前页面,跳转到应用内的某个页面,无法跳转至 tabbar  页面。使用 wx.navigateBack 可以返回到原页面。

    wx.navigateTo({
      url: '../base-contact/base-contact?info=' + JSON.stringify(this.data.obj),
    })

    在下一个页面的 onload 里通过 option 可以获取从上一个页面传递过来的参数。

    onLoad: function (options) {
      let data = JSON.parse(options.info)
      console.log(data)
    },

    使用 wx.navigateBack 关闭当前页面,返回上一页面或者多级页面时,如何向上一个页面传递参数呢?

    这里首先通过 getCurrentPages 获取当前的页面栈。通过 setData() 方法,把数据传递到要跳转的页面中去。

    let pages = getCurrentPages();
    let prevPage = pages[pages.length - 2];
    prevPage.setData({
      message: '传递给上一个页面的数据',
    })
    wx.navigateBack({
      delta: 1,
    })

    我们只需要在上一页面的 onShow 生命周期中获取参数。

    let pages = getCurrentPages();
    let currPage = pages[pages.length - 1]; //当前页面
    let json = currPage.data.message;
    if(json != undefined) { //判断传过来的值
      // 逻辑处理
    }

     

    展开全文
  • 自己制作的一款小程序里面,为了实现上一页下一页的效果,以及点击view组件后跳转并提取指定的文章页面内容。并且用户在内容页点击上一页下一页时进行相应的变化。 开发困惑:一个冒号和等号的区别让我折磨了两三天...

    一、前言

    自己制作的一款小程序里面,为了实现上一页下一页的效果,以及点击view组件后跳转并提取指定的文章页面内容。并且用户在内容页点击上一页下一页时进行相应的变化。
    开发困惑:一个冒号和等号的区别让我折磨了两三天。如下
       this.setData({
          books:books
        })
    里面应该是“:”而不是“=”。一开始我填的等号,然后一直排错,后来一不小心看到修改了下,果然如此!

    二、列表页wxml

    <block wx:for="{{bookkey}}" wx:for-item="item"  wx:for-index="idx">
      <view class='item-box' bindtap='TZlist' data-id="{{idx+1}}">
        <text class='numID'>{{idx+1}}.</text>
        <text class='item-title'>{{item.title}}</text>
      </view>
    </block>
    利用wx:for将bookey内的数据按顺序输出,同时定义属性data-id传出相应的数据id。绑定点击事件TZlist

    三、列表页js

      TZlist:function(event){
        var bookid = event.currentTarget.dataset.id;
        wx.navigateTo({
          url: '../book/book?id=' + bookid   //点击后请求id传出到新页面
        })
      },
      data: {
        
      },
      onLoad: function (options) {
        this.setData({
          bookkey: book.booklist     //获取相应的数据并写入data
        });
      }
    在此之前得引入数据库文件,定义变量book来接收
    var book = require("../../data/book_data.js");

    四、内容页wxml

    <view class='continer'>
        <view class='quse-title'>
          <text class='quse-title2'>
          问题{{books.id}}:{{books.title}}
        </text>
          <view class='answer'>
            {{books.contant}}
          </view> 
        </view>
    </view>
    <view class='anniu-box'>
      <view class='anniu-shang'  bindtap='Shangtiao' data-bookss="{{books.id-1}}">
        上一条
      </view>
      <view class='anniu-xia' bindtap='Xiatiao' data-bookss="{{books.id}}">
        下一条
      </view>
    </view>


    五、内容页js

     onLoad: function (options) {
        var bookid = options.id;    //接收之前传出的id值并赋给bookid变量
        var books = book.booklist[bookid-1];   //获取数据文件中的相关id数据
        this.setData({
          books:books      //将获取到的数据写入data
        })
      }
     Shangtiao: function (event) {
        var bookid = event.currentTarget.dataset.bookss;
        if(bookid){
          wx.navigateTo({
            url: '../book/book?id=' + bookid
          })
        }
      },
      Xiatiao: function (event) {
        var bookid = event.currentTarget.dataset.bookss;
        parseInt("bookid");
        bookid ++;
        console.log(bookid);
        wx.navigateTo({
          url: '../book/book?id=' + bookid
        })
      },

    上一块是实现上一页下一页效果的代码,复用性不高,到时候再进行修改





    展开全文
  • 微信小程序如何拉加载下一页

    千次阅读 2018-10-24 15:18:15
    变量 data: { videos: [], page: 1, pageSize: 8, isLastPage: false, ... tips: '拉加载更多' ...pageSize 一页的数据量 ...isLastPage 当前是否最后一页 tips 页尾提示信息 拉事件 ...

    变量

    data: {
            videos: [],
            page: 1,
            pageSize: 8,
            isLastPage: false,
            tips: '上拉加载更多'
    },
    
    • videos 数据容器
    • page 当前页数
    • pageSize 一页的数据量
    • isLastPage 当前是否最后一页
    • tips 页尾提示信息

    上拉事件

    onReachBottom: function () {
            // 最后一页了,取消下拉功能
            if (this.data.isLastPage) {
                return
            }
            this.setData({ page: this.data.page + 1 })
            this.requestVideos(this.data.activeIndex)
    },
    

    需要判断是否最后一页,不再响应加载,我这里直接return出函数了,requestVideos 是向服务器访问数据的自定义函数

    你也可以在页面的.json文件中定义距离底部多少距离,响应上拉事件,我试了,感觉差别不大,没太多影响

    请求

     requestVideos(index){
            // 发起请求
            wx.showLoading({
                title: '加载中',
            })
            var app = getApp()
            wx.request({
                url: app.globalData.request_domain + '/index/index/videos',
                data: { type: index, page: this.data.page },
                method: "POST",
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                },
                success: (res) => {
                    if (res.statusCode != 200 || res.data.code != 200) {
                        app.showError()
                    } else {
                        wx.hideLoading()
                        var newData = {}
                        if (res.data.data.length < this.data.pageSize) {
                            // 没有数据了,已经是最后一页
                            newData.isLastPage = true
                            newData.tips = "已显示全部啦"
                        }
                        // 追加数据
                        newData.videos = this.data.videos.concat(res.data.data)
                        this.setData(newData)
                    }
                },
                fail: () => {
                    app.showError()
                }
            })
        }
    
    
    • Array.concat(Array) 将参数数组添加到调用数组中,形成新的数组
    • newData 是为了去保存可能存在需要刷新的分页数据
    • 通过 pageSize 判断是否最后一页
    • showError() 是定义在 app 中的全局函数,就是显示几秒的错误提示
    // 显示网络异常
    showError: function () {
        wx.showToast({
            title: "网络异常",
            icon: 'loading'
        })
    }
    

    顺便提一点是微信小程序是有 iconsuccessloading 的延时显示提示,没有错误的,你可以自定义图片路径在参数 image 中,来显示指定图标的提示

    上面的函数你甚至可以定义传参来自定义提示内容

    完整代码

    以下是我小程序中所有 js 代码,因为我是有几个类型的视频,可以选择然后刷新,注意在页面有任何刷新的时候,都需要考虑分页数据的重置,当需要重置的次数很多,你当然需要把它放在一个函数中去调用

    
    Page({
        data: {
            domain: getApp().globalData.resource_domain,
            activeIndex: 1,
            videos: [],
            page: 1,
            pageSize: 8,
            isLastPage: false,
            tips: '上拉加载更多'
        },
    
        onLoad: function() {
            this.requestVideos(1)
        },
    
        // 上拉加载更多
        onReachBottom: function () {
            // 最后一页了,取消下拉功能
            if (this.data.isLastPage) {
                return
            }
            this.setData({ page: this.data.page + 1 })
            this.requestVideos(this.data.activeIndex)
        },
    
        // 选择menu
        selector: function(e) {
            var index = e.currentTarget.dataset.index
            // 改变当前类,并重置分页数据
            this.setData({
                activeIndex: index,
                page: 1,
                isLastPage: false,
                tips: '上拉加载更多',
                videos: []
            })
            this.requestVideos(index)
        },
    
        /**
         * 请求视频集 1:一杆进洞 2:练习场 3:所有
         */
        requestVideos(index){
            // 发起请求
            wx.showLoading({
                title: '加载中',
            })
            var app = getApp()
            wx.request({
                url: app.globalData.request_domain + '/index/index/videos',
                data: { type: index, page: this.data.page },
                method: "POST",
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                },
                success: (res) => {
                    if (res.statusCode != 200 || res.data.code != 200) {
                        app.showError()
                    } else {
                        wx.hideLoading()
                        var newData = {}
                        if (res.data.data.length < this.data.pageSize) {
                            // 没有数据了,已经是最后一页
                            newData.isLastPage = true
                            newData.tips = "已显示全部啦"
                        }
                        // 追加数据
                        newData.videos = this.data.videos.concat(res.data.data)
                        this.setData(newData)
                    }
                },
                fail: () => {
                    app.showError()
                }
            })
        }
    })
    
    

    POST 请求需要修改 header,系统默认是 json

    展开全文
  • 小程序scroll-view scroll-y 拉加载下一页 去博客设置页面,选择款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片. // An highlighted block &amp;lt;scroll-view scroll-y class=&quot;aside ...

    小程序scroll-view scroll-y 上拉加载下一页

    博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片.

    // An highlighted block
     <scroll-view scroll-y class="aside flex-wrap flex-direction-col" bindscrolltolower="loadMore">
          <block wx:for="{{navList}}" wx:key="{{}}">
            <text class="type-nav {{curNav == item.id ? 'selected' : ''}}" bindtap="selectNav" data-index="{{index}}" data-id="{{item.id}}" data-text='{{item.deployment}}'>{{item.deployment}}</text>
          </block>
        </scroll-view>
    
      loadMore: function (e) {
        var that = this
        if (that.data.aa.length == that.data.page * 15) {
          that.data.page = that.data.page + 1
          this.inquiryplace();
        }
    
      },
    
    展开全文
  • 微信小程序开发中列表加载下一页以及下拉刷新 实现方法
  • 下拉加载下一页: 应用场景:刷新列表数据。 在app.json文件或页面对应的JSON文件中配置"enablePullDownRefresh": true; //下拉加载下一页 ... //判断到是最后一页,则停止刷新 if((1+_this.page) > ...
  • 小程序 带参数返回上一页

    千次阅读 2019-01-11 13:55:49
    提交标题返回上一页 如图: 点击设置标题跳转到下一页。这个页面为a页面。跳转到b页面 a页面代码:phototitle为标题 Page({ data: { phototitle:'',} )} //点击跳转 settitle: function (e) { wx....
  • 小程序做得多了,有些常用功能就...微信小程序之下拉触底时加载下一页 wxml参考: <scroll-view class='dataContainer' scroll-y bindscrolltolower="nextDataPage"> <block wx:for="{{userList}}...
  • 本次内容我们介绍在swiper页面当中添加控制按钮(可以控制翻页上一页下一页)。   首先搭建基础的swiper页面布局。然后我们主要将翻页按钮的div(.swiper-button-next/prev)加到外部容器(.swiper-container)当中...
  • 上一页下一页: 修改完的上一页上一页: 修改页:
  • 加载下一页 - pagesum++, 返回的数据是每的数据,也需要之前的数据展示。 错误:this.list=res.data.message.goods; 正确:this.list=[…this.list,…res.data.message.goods]; 2. 页面拉触底事件触发this....
  • 假如从页面B返回页面A时实现页面A刷新 页面B: var pages = getCurrentPages();//当前页面栈 if (pages.length &...//获取上一个页面实例对象 var currPage = pages[pages.length - 1]; // 当前页面,若不...
  • 用getCurrentPages把当前页面的数据传给前个页面,这种方式在微信小程序使用场景非常多。 testa.wxml &amp;lt;view class='container'&amp;gt; &amp;lt;text&amp;gt;{{name}}&amp;lt;/...
  • 1 找到滚动条触底事件 微信小程序官方开发文档寻找 2 判断还有没有下一页数据 1 获取到总页数 只有总条数 总页数 = Math.ceil(总条数 / 容量 pagesize) 总页数 = Math.ceil( 23 / 10 ) = 3 2 获取到当前的页码 ...
  • 用户滑页面 滚动条触底 开始加载下一页数据 1.输入滚动条触底事件 2.判断是否有下一页数据 1)获取到总页数 总页数 = Math.ceil(总条数/ 容量) =Math.ceil(total/pagenum) 2)获取当前页码 3)判断一下 当前的...
  • } return } console.log(res.data.page,res.data.pages) } } }) }, 触底事件与methods同级 // 拉 onReachBottom() { this.params.page += 1; this....
  • 微信小程序实现加载下一页数据(翻页) 1.先async实现异步请求数据 获取到的数据如下 2.获取总数据条数 const total=res.total;//获取总条数 3.计算得到这么多条数据该分配的页数 this.totalPage=Math.ceil...
  • 1.本来在onload执行加载数据,但是因为要在这个页面跳转到下个页面修改数据,再返回到这个页面,所以就把初始化数据写到onshow中,只要进入页面就触发请求初始化数据。 2.但是当在a页面加载更多的是时候进入b页面...
  • 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码 // 此处是A页面 wx.navigateTo({ url: ‘B?id=1’ }) // 此处是B页面 wx.navigateTo({ ...
  • 微信小程序页面栈有10层限制。使用wx.navigateTo()或<navigator open-type="navigateTo"/>组件跳转的页面路径最多只有10层。页面路径大于10层后,再使用就跳转不了了。 因此需要合理利用小程序不同跳转方式:...
  • 这个功能的应用是在某个页面填写信息需要进入下个页面选择一些内容并且将选择的内容赋值给上一个填写信息的页面,填写信息的页面不能刷新,刷新了前面填写的信息就刷新掉了 js代码 field: function (e) { var ...
  • 在微信小程序当中当在上拉的时候要显示下一页的数据的时候就需要用到拉刷新事件。 首先要获取数据总条数以及一页有多少条数据,再使用Math的向上取整计算得出一共有多少页。以下代码为例:总页数/一页数据的量 ...
  • 常规的页面数据共享,这个很大众了,也很简单,可以把数据放到app.js中的个变量中存储起来,然后各个页面通过getApp()来得全局app,从而共享数据。 app.js App({ globalData: { userInfo: null } }) 其他...
  • maker一下使用scroll-view实现下拉加载更多(下一页),比较粗糙,如下图。 由于数据是死数据,只能加载次(如图)。源码下载:http://download.csdn.net/download/dknightl/9922174 下拉逻辑由scroll-view里的...
  • 下拉与触底函数是每个页面都有的事件函数, 同页面生命周期函数类似 : 监听并执行 onPullDownRefresh 判断用户在最顶部下拉时触发, 如果下拉后再拉回去则不触发  onReachBottom 判断用户到达最底部时触发 如果...
  • lastPage:function(){ var pages = getCurrentPages(); //当前页面 var prevPage = pages[pages.length - 2]; //上一页面 wx.navigateBack({ //返回 delta: 1 }); }
  • 微信小程序上一个页面传值

    千次阅读 2019-07-04 10:05:00
    let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。...//prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面,-3是上上个页面以此类推。 prevPage.setData({ // 将...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,050
精华内容 8,420
关键字:

上一页下一页小程序