想实现图片轮播并且跳转页面实现不了，是因为swiperImg组的问题吗？还是因为wxss求大佬解答
index.wxml
<view class="main">
<swiper indicator-dots="true" autoplay="true" interval="{{interval}}" duration="{{duration}}" circular="true">
<swiper-item wx:for="{{swiperImg}}" wx:key=''>
<navigator url="{{item.url}}">
<image src="{{item.img}}" class="slide-image" width="100%"/>
</navigator>
</swiper-item>
</swiper>
<view class='notice'>
<view class="left">
<text class='iconfont icon-labagonggao voice'></text>
<view class="left-box">
<view class="left-text"></view>
<view class='content-box'>
<view class='content-text' animation="{{animationData}}"><text id="text">{{text}}</text></view>
</view>
<view class="right-text"></view>
</view>
</view>
<view class="right" bindtap="goApp">
<!-- <image class="app" mode="aspectFit" src="/assets/images/app.png" style="width:{{widthrpx}}rpx" bindload="imageLoad"></image> -->
</view>
</view>
<view class="search">
<navigator url="search/search">
<view class="search-text">
<icon class="weui-icon-search_in-box search-icon" type="search" size="14"></icon>
搜 索
</view>
</navigator>
</view>
<view class="selected">
<view class="select-title"><text>精选主题</text></view>
<view class="select-top">
<view class="select-top-small">
<navigator url="list/list">
<image src="/image/s1.png"></image>
</navigator>
</view>
<view class="select-top-small">
<navigator url="list/list">
<image src="/image/s2.png"></image>
</navigator>
</view>
</view>
<view class="select-bottom">
<navigator url="list/list">
<image src="/image/s3.png"></image>
</navigator>
</view>
</view>
<view class="newest">
<view class="newest-title"><text>最近新品</text></view>
<view class="newest-box">
<view class="newest-list">
<navigator url="details/details">
<image src="/image/s111.png"></image>
<view class="newest-text"><text>真姬菇 150g</text></view>
<view class="newest-text"><text>￥ 9.9</text></view>
</navigator>
</view>
<view class="newest-list">
<navigator url="bydetails/bydetails">
<image src="/image/s5.png"></image>
<view class="newest-text"><text>白玉菇 150g</text></view>
<view class="newest-text"><text>￥ 9.9</text></view>
</navigator>
</view>
<view class="newest-list">
<navigator url="lrdetails/lrdetails">
<image src="/image/s6.png"></image>
<view class="newest-text"><text>鹿茸菇 150g</text></view>
<view class="newest-text"><text>￥ 19.9</text></view>
</navigator>
</view>
<view class="newest-list">
<navigator url="yddetails/yddetails">
<image src="/image/s4.png"></image>
<view class="newest-text"><text>羊肚菌 10g</text></view>
<view class="newest-text"><text>￥ 29.9</text></view>
</navigator>
</view>
<view class="newest-list">
<navigator url="ccdetails/ccdetails">
<image src="/image/s7.png"></image>
<view class="newest-text"><text>虫草花 150g</text></view>
<view class="newest-text"><text>￥ 29.9</text></view>
</navigator>
</view>
<view class="newest-list">
<navigator url="details/details">
<image src="/image/s8.png"></image>
<view class="newest-text"><text>姬松茸 150g</text></view>
<view class="newest-text"><text>￥ 19.9</text></view>
</navigator>
</view>
<view class="newest-list">
<navigator url="hshdetails/hshdetails">
<image src="/image/s9.png"></image>
<view class="newest-text"><text>灰树花 150g</text></view>
<view class="newest-text"><text>￥ 29.9</text></view>
</navigator>
</view>
<view class="newest-list">
<navigator url="ngdetails/ngdetails">
<image src="/image/s11.png"></image>
<view class="newest-text"><text>牛肝菌 10g</text></view>
<view class="newest-text"><text>￥ 29.9</text></view>
</navigator>
</view>
<view class="newest-list">
<navigator url="xqjdetails/xqjdetails">
<image src="/image/s12.png"></image>
<view class="newest-text"><text>绣球菌 150g</text></view>
<view class="newest-text"><text>￥ 19.9</text></view>
</navigator>
</view>
</view>
</view>
</view>
index.js
Page({
data: {
swiperImg: [
{img:"/image/b1.jpg", url:'../component/bydetails/bydetails'},
{img:"/image/b2.jpg", url:'../component/details/details'},
{img:"/image/b3.jpg", url:'../component/ccdetails/ccdetails'}
],
indicatorDots: false,
autoplay: false,
interval: 3000,
duration: 800,
text: "新人有优惠",
animation: null,
timer: null,
textWidth: 0,
wrapWidth: 0
},
onShow() {
this.initAnimation(this.data.text)
},
onHide() {
this.destroyTimer()
this.setData({
timer: null
})
},
onUnload() {
this.destroyTimer()
this.setData({
timer: null
})
},
destroyTimer() {
if (this.data.timer) {
clearTimeout(this.data.timer);
}
},
/**
* 开启公告字幕滚动动画
* @param {String} text 公告内容
* @return {[type]}
*/
initAnimation(text) {
let that = this
this.data.duration = 15000
this.data.animation = wx.createAnimation({
duration: this.data.duration,
timingFunction: 'linear'
})
let query = wx.createSelectorQuery()
query.select('.content-box').boundingClientRect()
query.select('#text').boundingClientRect()
query.exec((rect) => {
that.setData({
wrapWidth: rect[0].width,
textWidth: rect[1].width
}, () => {
this.startAnimation()
})
})
},
// 定时器动画
startAnimation() {
//reset
// this.data.animation.option.transition.duration = 0
const resetAnimation = this.data.animation.translateX(this.data.wrapWidth).step({ duration: 0 })
this.setData({
animationData: resetAnimation.export()
})
// this.data.animation.option.transition.duration = this.data.duration
const animationData = this.data.animation.translateX(-this.data.textWidth).step({ duration: this.data.duration })
setTimeout(() => {
this.setData({
animationData: animationData.export()
})
}, 100)
const timer = setTimeout(() => {
this.startAnimation()
}, this.data.duration)
this.setData({
timer
})
}
})
index.wxss @import '../common/common.wxss'; .search{ padding: 20rpx; } .search-text{ display: flex; justify-content: center; align-items: center; height: 50rpx; color: #aaa; text-align: center; border: 1px solid #ddd; border-radius: 20rpx; } .search-text icon{ margin-right: 10rpx; } swiper { height: 421.5rpx; } swiper-item image { width: 100%; height: 100%; } .select-title,.newest-title{ width: 100%; padding:30rpx 0; height: 40rpx; color: #AB956D; text-align: center; } .select-top-small{ width: 375rpx; height: 375rpx; float: left; } .select-bottom,.select-top{ width: 100%; height: 375rpx; } .select-top-small image,.select-bottom image,.select-top-small navigator,.select-bottom navigator{ display: block; width: 100%; height: 100%; } .newest-box{ padding:0 40rpx; } .newest-box .newest-list{ display: inline-block; width: 325rpx; height: 325rpx; margin:0 20rpx 20rpx 0; border-radius: 10px; text-align: center; background: #f5f6f5; } .newest-box .newest-list:nth-child(2n){ margin-right: 0; } .newest-box .newest-list image{ width: 175rpx; height: 175rpx; margin: 20rpx 0 10rpx; } .newest-box .newest-list .newest-text{ font-size: 32rpx; }
