小程序swiper组件卡顿
出现的机型：魅族魅蓝note5，魅族pro7。
index.html
<!--index.wxml--><swiper style="text-align:center;" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}" wx:key="index"> <swiper-item> <navigator url='javascript:;' style="background-image:url({{item.src}})"></navigator> </swiper-item> </block> </swiper><view class="container"> <!-- <view class="userinfo"> <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> <block wx:else> <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> --> <view> <text>经度：{{latitude}}</text> <text>纬度：{{longitude}}</text> </view> <button bindtap="scan">扫一扫</button></view> |
index.js
//index.js//获取应用实例const app = getApp()Page({ data: { motto: 'Hello World', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), latitude: 0, longitude: 0, imgUrls: [ { src: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', index: 0 }, { src: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', index: 1 }, { src: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg', index: 2 } ], indicatorDots: true, autoplay: false, interval: 4000, duration: 300 }, //事件处理函数 bindViewTap: function () { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { var that = this; wx.getLocation({ type: 'wgs84', altitude: true, success: function (res) { var latitude = res.latitude // 经度 var longitude = res.longitude // 纬度 that.setData({ latitude: latitude, longitude: longitude }) }, fail: function (res) { }, complete: function (res) { }, }) if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse) { // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 app.userInfoReadyCallback = res => { this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { // 在没有 open-type=getUserInfo 版本的兼容处理 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) } }, getUserInfo: function (e) { console.log(e) app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) }, /*扫一扫 */ scan: function () { wx.scanCode({ success: (res) => { console.log(res) } }) }, /**转发 */ onShareAppMessage: function (res) { if (res.from === 'button') { // 来自页面内转发按钮 console.log(res.target) } return { title: 'Wendy的小程序', success: function (res) { // 转发成功 }, fail: function (res) { // 转发失败 } } }}) |
index.wxss
/**index.wxss**/.userinfo { display: flex; flex-direction: column; align-items: center;}.userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%;}.userinfo-nickname { color: #aaa;}.usermotto { margin-top: 200px;}swiper{ width: 100%; height: 420rpx;}swiper navigator{ width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover;} |
问题解决了吗？