小程序中的问题

最新推荐文章于 2022-06-28 10:43:52 发布

原创最新推荐文章于 2022-06-28 10:43:52 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了在微信小程序中如何有效隐藏滚动条、多种参数传递方法，包括URL传值、使用全局变量及本地缓存，以及bindtap事件处理与事件冒泡机制的运用，帮助开发者提升小程序页面间的交互效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.有效隐藏scroll-view滚动条方法

在有scroll-view滚动条页面的wxss里添加

::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

不用选择器，以及不能在app.wxss直接添加

二.传参数的几种方法

1.navigator跳转时

wxml页面（参数多时可用"&"）

<navigator url='../index/index?id=1&name=aaa'></navigator>

或者添加点击事件，js用navigateTo跳转传参，两种效果一样

wx.navigateTo({
           url: '../index/index?id=1&name=aaa',
           })

js页面在onLoad里直接获取

onLoad: function (options) {
    //页面初始化  options为页面跳转所带来的参数
    var id = options.id   //获取值
 },

2.全局变量

app.js页面

globalData:{
      id:null
   }

赋值：

var app = getApp();
app.globalData.id = 2

取值：

var app = getApp();
var is = app.globalData.id

3.列表index下标取值

wxml页面

<button bindtap='clickMe'>点击</button>

如果需要传递多个，可以写多个data-[参数]的方式进行传递

js页面

clickMe:function(e){
    var id = e.currentTarget.dataset.id
    console.log(id);
},

注意：通过wxml设置data-[参数名]传递参数，[参数名]只能是小写，不能有大写

三、页面传值的几种方式

1.url传值

list.wxml:

<view class="playIcon">
    <image src="../../iconfont/play_init.png"  bindtap="playAudio" data-songid="{{song.song_id}}"></image>
</view>

list.js:

playAudio: function (event) {
    let songid = event.currentTarget.dataset.songid;
    var that = this;
    wx.navigateTo({
      url: ‘/pages/listDetail/listDetail?title=‘ + songid,
    })
}   
 

listDetail:

 onLoad: function (options) {
    var that = this;
    console.log(‘options‘,options) 

}

2.app.globalData 设置全局变量

app.js: 设置全局变量

App({
globalData: {
userInfo: null,
host:‘http://localhost:8000‘
}
})
 

index.js:

const app = getApp()
app.globalData = ‘这里也可以设置值‘,
console.log(app.globalData.host)

3.setStorage() /getStorage() 将值写在本地缓存里，最大支持10M，可以存些文本之类的，音频视频不可以

list.js:

存值到本地缓存

wx.setStorage(‘title‘,data)

 

listDetail.js：

从本地缓存取值

let info = wx.getStorage(‘title‘)

console.log(‘info‘,info)

四.bindtap事件与冒泡

bindtap点击事件

在 .wxml文件绑定：

<view id='oId' data-userxxx='user' bindtap='click'>点击</view>

自定义数据(data-)中的大写改为 短横线+其小写

取数据时, 去掉data和那些短横线并还原大写 (data-user-xxx --> userXxx)

当点击该组件时, 会触发相应的函数执行

在 .js文件

//index.js
Page({
  data: {
    mo: 'Hello World!!',
    oId : '1234',
  },
  
   // 定义函数
  tapMessage: function(event) {
    console.log(event.target.id);       // 可获得
    console.log(event.target.name);     // 无法获得, 通过target只能直接获取id
    console.log(event.target.dataset);  // 要获得其它属性, 需要从dataset(数据集)中获取
    console.log(event.target.dataset.userxxx);  // userxxx为自定义的属性名, 但命名方式为:data-userxxx
   
    // 这里还原使用userXxx
    console.log(event.target.dataset.userXxx);
  }
})

event封装的是该事件的信息, 如上通过它可得到一些数据

事件冒泡就是指嵌套事件发生

如果多层标签嵌套, 里层事件发生后, 其外层会相应发生, 如:

<view bindtap='handout'>
   outer
   <view bindtap='handmiddle'>
     middle
     <view bindtap='handinner'>inner</view>
   </view>
 </view>

handout: function () {
  console.log("out");
},
 
handmiddle: function () {
  console.log("middle");
},
 
handinner: function () {
  console.log("inner");
}

点击inner三个事件都执行, 点击middlek执行handmiddle和handout, 点击out只执行handout
阻止事件冒泡行为: 将bindtap改为catchtap就行了, 只会触发自身的点击事件
<view bindtap='handout'>
    outer
    <view catchtap='handmiddle'>
      middle
      <view bindtap='handinner'>inner</view>
    </view>
</view>
需要理解是, 它阻断自身的冒泡行为
如上点击inner, 执行的是handinner和handmiddle两个函数
不管是不是自身触发的点击行为, 传到我这里, 我就将它阻断(不再向上传递)