小程序开发问题整理(幻灯片|滑动导航|缓存记录|tabBar)

 其他知识   高蒙   阅读(2024)   评论(5)   2017-07-12 15:08:59    小程序 


在开发小程序中,遇到了一些我觉得注意的地方,比如常见的功能如幻灯片,滑动导航,缓存记录,tabBar等问题。

下面,我自己整理一下,遇到这些问题相对应的处理方法,不是很全面。只做笔记。后面有时间,我单独拿出来说。

注意:小程序中跳转地址最多5层。

一、幻灯片点击图片放大并且打开点击的图片。

问题描述

    在点击幻灯片的时候,点击图片不能直接打开所对应的图片。

解决方法

  •     幻灯片使用视图容器swiper,其中有个属性为bindchange可以触发事件。

  •     在滑动幻灯的时候,需要记录当前滑动图片的索引值即可。

  •     【注意】previewImage方法中current参数是需要传入图片地址字符串。


代码如下

<swiper class="swiper" bindchange="swiperchange">
<block wx:for="{{morepic}}" wx:key="*this">
  <swiper-item>
    <view class="swiper-item">
      <image src="{{item}}" bindtap="getPreview"></image>
    </view>
  </swiper-item>
</block>
</swiper>

Page({
    data: {
        morepic:[],
        current:0,
    },
    onLoad: function () {
        //此处省略赋值等操作
    },
    /* 点击放大图片 */
    getPreview:function(){
        var that = this
        var images = that.data.morepic
        wx.previewImage({
            current: images[that.data.current],
            urls: that.data.morepic,
        })
    },
    /* 获取第几张图 */
    swiperchange: function (e) {
        var that = this
        that.setData({
             current: e.detail.current
        })
    },
})


1.jpg


二、缓存本地搜索记录,重复值不写入缓存。

问题描述:

    小程序中需要记录用户搜索关键字,当用户重复搜索某个关键字的时候,不重复的写入到缓存记录中。

解决方法

    这里只要结合js就可以实现。

代码如下

Page({
  data: {
    socookeis: [],
  },
  /* 储存本地缓存搜索关键字 */
  setCookie:function(val){
    /* 判断数据是否存在 */
    var cook = this.data.socookeis;
    if (cook.indexOf(val) < 0){
      this.data.socookeis.unshift(val)
      wx.setStorageSync("so_cookies", this.data.socookeis)
    }
  },
  /* 获取本地缓存搜索关键字  */
  getCookie:function(){
    var that = this
    var cook = wx.getStorageSync('so_cookies')
    if (cook){
      that.setData({
        socookeis: cook
      })
    }
  },
})


2-1.jpg


三、滑动菜单实现,自动选中搜索到的分类名。

问题描述:

    当我在搜索的时候,刚好搜索词就是我滑动菜单中的一个,那么需要自动的展示为选中状态。

解决方法

    这个地方其实我们可以使用三元操作符,还有就是使用到组件事件的dataset方法。具体的使用去看小程序官方文档事件的使用。

代码如下

<scroll-view scroll-x="true" >
    <view wx:for="{{list}}" wx:for-index="i">
<view class="list {{item == keywords ? 'active' : ''}}"  bindtap="cateactive" id="id_{{i}}" data-keyword="{{item}}">{{item}}</view>
    </view>
</scroll-view>

Page({
  data: {
    list: [],
    keywords:'',
  },
   /* 点击事件 */
  cateactive: function (e) {
    var that = this
    var keywords = e.target.dataset.keyword
    that.setData({
      keywords: keywords,
    })
  },
})


3-1.jpg


四:解决tabBar使用wx.switchTab()方法不能传参。

问题描述:

    我有三个tabBar,其中有个我的收藏,当我在其他内容页点击收藏之后,重新进入这个页面时候,需要重新的刷新这个页面,并且更新当前的数据。

解决方法:

    可以使用全局变量,以及在onShow()的方法中,接收变量的值。onShow()是打开页面每次都会调用的方法。

代码如下

1、在app.js中定义一个全局变量。
App({
  globalData:[]
})

2、在当前页面的代码
var app = getApp()

Page({
  data: {},
  onShow: function () {
    var that = this
    var isfavortie = app.globalData.isfavortie 
    if(isfavortie == 1){
       // 加载收藏列表...
    }
  },
})


4.jpg


以上就是小程序开发问题整理的部分总结。




相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客