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;
}
直接换成bindtap事件跳转
首页index轮播图一直实现不了显示不了图片轮播并且不能跳转，不知是swiperImg组的问题还是因为wxss没对应，
能不能把你上面代码整理一下 搞成一个代码片段 这样看的头疼
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html