微信小程序 开发 坑（3）
这一次记录两个问题
1.微信小程序的轮播组件性能优化的问题:
问题出现原因
当需要轮播的数据量大的时候，比如200张图片或者更多的时候，轮播组件出现明显的卡顿，ios手机强制退出小程序并报错（微信报错）
解决思路:
一. 自己写轮播组件，可以性能优化，现在加载几张然后出现下一张图就把第一个盒子给删除
二. 让轮播组件加载数据变少，只加载三张。当切换图片时让这张图片的上一张和下一张改变。
实际执行：
在这里我用的是第二种方法，这种方法实现起来相对的时间较少，效率高。
代码
Component({
/**
* 组件的属性列表
*/
properties: {
list: {
type: Array,
value: null,
observer(newValue) {
this.setData({
totalCount: newValue.length
})
}
},
current: {
type: Number,
value: -1,
observer(newValue) {
let {
list
} = this.properties
let swiperList = [],
capyList = []
//这里是做了一些轮播的逻辑
if (newValue == 0) { //用户点第一张
swiperList = list.slice(list.length - 1)
capyList = list.slice(newValue, newValue + 2)
swiperList.push(...capyList)
swiperList.forEach((item, index, arr) => {
switch (index) {
case 0:
arr[index] = {
url: item,
index: list.length - 1
}
break;
case 1:
arr[index] = {
url: item,
index: newValue
}
break;
case 2:
arr[index] = {
url: item,
index: newValue + 1
}
break;
default:
break;
}
})
} else if (newValue == (list.length - 1)) { //用户点最后一张
swiperList = list.slice(newValue - 1)
capyList = list.slice(0, 1)
swiperList.push(...capyList)
swiperList.forEach((item, index, arr) => {
switch (index) {
case 0:
arr[index] = {
url: item,
index: newValue - 1
}
break;
case 1:
arr[index] = {
url: item,
index: newValue
}
break;
case 2:
arr[index] = {
url: item,
index: 0
}
break;
default:
break;
}
})
} else { //用户点中间
swiperList = list.slice(newValue - 1, newValue + 2)
swiperList.forEach((item, index, arr) => {
switch (index) {
case 0:
arr[index] = {
url: item,
index: newValue - 1
}
break;
case 1:
arr[index] = {
url: item,
index: newValue
}
break;
case 2:
arr[index] = {
url: item,
index: newValue + 1
}
break;
default:
break;
}
})
}
// this.setData({
// swiperList
// })
this.setData({
swiperCurrent: newValue,
['activityInfo.postrUrl']: this.data.list[newValue],
swiperList
})
}
},
activityid: {
type: String,
value: -1,
observer(newValue) {
this.setData({
['activityInfo.activityid']: newValue
})
}
},
url: {
type: String,
value: ""
}
},
/**
* 组件的初始数据
*/
data: {
isShowSwiper: true,
swiperHeight: 0,
swiperCurrent: 0,
totalCount: 0,
buttonOpenType: '',
activityInfo: {
activityid: 0,
postrUrl: ''
},
swiperList: null // 真正轮播的数组
},
lifetimes: {
ready() {
this.onSetSwiperHeight()
this.setButtonOpenType()
},
attached() {
}
},
pageLifetimes: {
show() {
this.setButtonOpenType()
}
},
/**
* 组件的方法列表
*/
methods: {
stopPropagation() {
return false
},
/**
* 设置保存按钮的open-type的值，没有保存图片到相册权限时候为openSetting
*/
setButtonOpenType() {
wx.getSetting({
success: (res) => {
let status = res.authSetting['scope.writePhotosAlbum']
if (status === true) {
this.setData({
buttonOpenType: ''
})
} else if (status === false) {
this.setData({
buttonOpenType: 'openSetting'
})
}
}
})
},
/**
* 设置swiper的高度，高度为屏幕高度减去footer的高度
*/
onSetSwiperHeight() {
let systemInfo = wx.getSystemInfoSync()
let windowHeight = systemInfo.windowHeight
this.onGetFooterHeight()
.then((footerHeight) => {
let swiperHeight = windowHeight - footerHeight
this.setData({
swiperHeight
})
})
},
/**
* 获取footer的高度
*/
onGetFooterHeight() {
return new Promise((resolve, reject) => {
const query = this.createSelectorQuery()
query.select('.footer').boundingClientRect()
query.exec(function(res) {
resolve(res[0].height)
})
})
},
/**
* swiper bindchange调用的方法
*/
onChangeSwiper(e) {
let {
current,
currentItemId
} = e.detail
let {
list
} = this.data
let {
swiperList
} = this.data
// 这里是轮播的逻辑
if (currentItemId == 0) {
switch (current) {
case 0:
swiperList[1] = {
url: list[currentItemId * 1 + 1],
index: currentItemId * 1 + 1
}
swiperList[2] = {
url: list[list.length - 1],
index: list.length - 1
}
break;
case 1:
swiperList[2] = {
url: list[currentItemId * 1 + 1],
index: currentItemId * 1 + 1
}
swiperList[0] = {
url: list[list.length - 1],
index: list.length - 1
}
break;
case 2:
swiperList[0] = {
url: list[currentItemId * 1 + 1],
index: currentItemId * 1 + 1
}
swiperList[1] = {
url: list[list.length - 1],
index: list.length - 1
}
break;
}
} else if (currentItemId == (list.length - 1)) {
switch (current) {
case 0:
swiperList[1] = {
url: list[0],
index: 0
}
swiperList[2] = {
url: list[currentItemId * 1 - 1],
index: currentItemId * 1 - 1
}
break;
case 1:
swiperList[2] = {
url: list[0],
index: 0
}
swiperList[0] = {
url: list[currentItemId * 1 - 1],
index: currentItemId * 1 - 1
}
break;
case 2:
swiperList[0] = {
url: list[0],
index: 0
}
swiperList[1] = {
url: list[currentItemId * 1 - 1],
index: currentItemId * 1 - 1
}
break;
}
} else {
switch (current) {
case 0:
swiperList[1] = {
url: list[currentItemId * 1 + 1],
index: currentItemId * 1 + 1
}
swiperList[2] = {
url: list[currentItemId * 1 - 1],
index: currentItemId * 1 - 1
}
break;
case 1:
swiperList[2] = {
url: list[currentItemId * 1 + 1],
index: currentItemId * 1 + 1
}
swiperList[0] = {
url: list[currentItemId * 1 - 1],
index: currentItemId * 1 - 1
}
break;
case 2:
swiperList[0] = {
url: list[currentItemId * 1 + 1],
index: currentItemId * 1 + 1
}
swiperList[1] = {
url: list[currentItemId * 1 - 1],
index: currentItemId * 1 - 1
}
break;
}
}
this.setData({
swiperCurrent: currentItemId * 1,
['activityInfo.postrUrl']: list[currentItemId * 1],
swiperList
})
},
/**
* 关闭按钮调用的方法
*/
onClickBtnClose() {
this.triggerEvent('eventClose')
},
/**
* 获取是否有保存图片到相册的权限
*/
onGetSettingOfSaveImageToPhotosAlbum() {
return new Promise((resolve, reject) => {
wx.getSetting({
success: (res) => {
let status = res.authSetting['scope.writePhotosAlbum']
if (status === undefined) { // 没有授权记录的情况
wx.authorize({
scope: 'scope.writePhotosAlbum',
success: (res) => {
resolve()
this.setData({
buttonOpenType: 'openSetting'
})
},
fail: (err) => {
reject({
showTip: true
})
this.setData({
buttonOpenType: 'openSetting'
})
}
})
} else if (status === false) { // 授权记录为false的情况
this.setData({
buttonOpenType: 'openSetting'
})
reject({
showTip: false
})
} else {
// console.log('授权了')
resolve()
}
}
})
})
},
/**
* 获取图片信息
*/
onGetImageInfo() {
let src = this.data.list[this.data.swiperCurrent]
return new Promise((resolve, reject) => {
wx.getImageInfo({
src,
success(res) {
if (res.errMsg === 'getImageInfo:ok') {
resolve(res)
} else {
reject({
showTip: true
})
}
},
fail() {
reject({
showTip: true
})
}
})
})
},
/**
* 保存图片到相册
*/
onSaveImageToPhotosAlbum(filePath) {
return new Promise((resolve, reject) => {
wx.saveImageToPhotosAlbum({
filePath,
success(res) {
resolve(res)
},
fail() {
reject({
showTip: true
})
}
})
})
},
/**
* 保存图片
*/
onSavePhoto() {
wx.showLoading({
title: '保存中',
mask: true
})
this.onGetSettingOfSaveImageToPhotosAlbum()
.then(() => {
return this.onGetImageInfo()
})
.then((res) => {
let tempFilePath = res.path
return this.onSaveImageToPhotosAlbum(tempFilePath)
})
.then(() => {
wx.hideLoading()
wx.showModal({
title: '提示',
content: '图片已保存到手机相册',
showCancel: false,
mask: true
})
})
.catch((err) => {
wx.hideLoading()
err.showTip && wx.showToast({
title: '保存失败',
icon: 'none',
mask: true
})
})
},
/**
* 创建海报
*/
onCreatePoster(e) {
this.setData({
['activityInfo.postrUrl']: this.data.list[this.data.swiperCurrent]
})
},
onShowSwiper() {
this.setData({
isShowSwiper: true
})
},
onHideSwiper() {
this.setData({
isShowSwiper: false
})
}
}
})
2.ios定位的层级的问题
问题描述：
有两个盒子第一个盒子开启固定定位z-index:99,第二个盒子的子元素开启定位为z-index::100。第一个盒子在上，第二个盒子在下。第二个盒子的子元素无法覆盖第一个盒子。
出现原因:
第二个盒子的子元素层级再高也无法突破第二个盒子，能覆盖第一个盒子的只有第二个盒子
解决方法：
给第二个盒子加层级z-index:100;
