微信小程序 常用轮子

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>666view>
  <view>666view>
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