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](/user/param)  {String} text 公告内容
   * [@return](/user/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](/user/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;

}