微信小程序 常用轮子

文章目录

• ​​1 布局​​

• ​​1.1 循环组件​​
• ​​1.2 flex内容居中​​

• ​​2 事件​​

• ​​2.1 bindtap 绑定事件​​
• ​​2.2 长按属性​​
• ​​2.3 提示框Toast​​
• ​​2.4 延时函数​​
• ​​2.5 页面跳转​​

• ​​2.5.1 无参跳转​​
• ​​2.5.2 带参跳转​​

1 布局

1.1 循环组件

<block wx:for-items="{{movies}}" wx:key="key">
  <swiper-item>
    <image src="{{item.url}}" class="slide-image" mode="aspectFill" />
  </swiper-item>
</block>

data: {
  movies: [
    { url: 'https://img1.baidu.com/it/u=1361135963,570304265&fm=26&fmt=auto&gp=0.jpg' },
    { url: 'https://img2.baidu.com/it/u=3206689113,2237998950&fm=26&fmt=auto&gp=0.jpg' }
  ]
},

1.2 flex内容居中

view

<view class='container'>
  <view>666</view>
  <view>666</view>
</view>

css

.container{
  border: 2rpx solid red;
  width: 500rpx;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

2 事件

2.1 bindtap 绑定事件

<button bindtap='jump_page'>实现跳转页面</button>

// 跳转页面
jump_page() {
  wx.navigateTo({
    url: '/pages/info/info',
  })
},

2.2 长按属性

<view bindtap="btn" bindlongpress="longpress" >
  66666666666
</view>

// 长按进入函数
longpress(){
  console.log("长按")
},

// 单词点击进入
btn(){
  console.log("进入")
},

2.3 提示框Toast

wx.showToast({
  image: '../../images/toast/success.png',
  title: "发送成功",
})

2.4 延时函数

setTimeout(function () {
  //要延时执行的代码
}, 2000) //延迟时间 这里是2秒

2.5 页面跳转

2.5.1 无参跳转

wx.redirectTo({
  url: '../chooseLib/chooseLib',
})

wx.navigateTo({
  url: '/pages/perInfo/perInfo',
})

跳转tabBar专用

wx.switchTab({
  url: '/pages/scan/scan'
});

2.5.2 带参跳转

wxml

bindtap="catchTapCategory" data-isbn="{{item.isbn}}" data-id="{{item.id}}"

js

catchTapCategory: function (e) {
  var id = e.currentTarget.dataset._id
  var isbn = e.currentTarget.dataset.isbn
  
  wx: wx.navigateTo({
    url: 'return1/return1?id=' + id + "&isbn=" + isbn
  })
},

​​https://www.couragesteak.com/article/236​​