微信小程序 公告上下滚动

微信小程序 公告上下滚动

2021-08-17 857
下载不了?请联系网站客服提交链接错误!
增值服务:
微信小程序 公告上下滚动
最近更新 2021年08月17日
资源编号 105671

微信小程序 公告上下滚动

2021-08-17 小程序教程 0 857 百度已收录
限时活动VIP只需20元
增值服务:
¥ 0 钻石 开通VIP尊享优惠特权
立即下载 升级会员
详情介绍
复制代码
<!--公告-->
      <!-- <view class=\"notice_box\">
        <view class=\"notice\">
          <image src=\"/images/notice-icon.png\"></image>
        </view>

        <view class=\"swiper_box\">
          <swiper 
              vertical=\"true\"
              autoplay=\"true\" 
              circular=\"true\"
              interval=\"3000\"
              duration=\'300\'
              easing-function=\'easeInOutCubic\'>
            <block wx:for=\'{{msgList}}\' wx:key=\'index\'>
                <swiper-item>
                  <view class=\"swiper-item\">
                    <span class=\"newsp\">最新</span>
                    <text class=\"notice-title\">{{item.title}}</text>
                  </view>
                </swiper-item>
            </block>
          </swiper>
        </view> 
      </view> -->
      <!--公告-->
复制代码

 

复制代码
/*
*公告栏
*/
.notice_box{
  /* margin:   0 20rpx; */
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  height: 80rpx;
  background-color: white;
}
.notice{
  padding: 0 20rpx;
  display: flex;
  align-items: center;
}
.notice_box swiper{
  height: 40px!important;
}
.notice image{
  width: 90px;
  height: 17px;
}
.swiper_box{
  width: 100%;
  padding-top: 22rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 2px;
}
.swiper-item {
  font-size: 12px;
  display: flex;
}
.newsp{
  color: #DE797D;
  font-size: 11px;
  background-color: #FBEDED;
  text-align: center;
  width: 31px;
  border-radius: 3px;
  display: block;
  height: 16px;
}
.notice-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  color:#343434;
  padding-left:6px;
}
复制代码

msgList的数据

msgList:[
      { title: \'河南,咱们一起扛\' },
      { title: \'女足首战\' },
      { title: \'雄鹿总冠军!!!\' }
],

资源下载此资源仅限注册用户下载,请先

1、本站赞助VIP,仅需【128】元即可 ! ! ! (赞助后永久享受整站资源全部免费下载)
2、站内资源均可通过签到等任务进行免费兑换。(鼓励大家签到)
3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。
4、本站所分享的源码、模板、软件工具等其他资源,都不包含技术服务,请大家谅解!
5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款兑现(特殊情况可退积分),请熟知后再赞助下载!收取的费用只为能长期与大家分享学习,本站为非商业性网站,纯属个人爱好!

K4资源 小程序教程 微信小程序 公告上下滚动 https://www.k4sc.com/105671.html

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务