帮我写一个微信小程序页面要求 1、带链接的轮播图点击图片会转到指定页面用wxfor实现 2、自下至上滚动的公告数据用wxfor实现高度占1行1秒钟滚动1个数据循环滚动 3、五个flex横向布局的图标点击会转到指定页面用wxfor实现 4、一个搜索框点击搜索框会转到指定页面 5、4个横向排列的标签点击标签后跳转到下方对应的标题标签位置始终不超过页面顶部用wxfor实现 6、4个标题每个标题下方用fl

wxml代码：

{{item.text}}

{{item}} {{item.text}}

js代码：

Page({ data: { bannerArray: [{ image: '', link: '' }], noticeArray: ['公告1', '公告2', '公告3'], iconArray: [{ image: '', text: '', link: '' }], searchLink: '', searchPlaceholder: '', tagArray: ['标签1', '标签2', '标签3', '标签4'], titleArray: ['标题1', '标题2', '标题3', '标题4'], noticeAnimation: {} },

onLoad: function() { this.scrollNotice(); },

scrollNotice: function() { var animation = wx.createAnimation({ duration: 1000, timingFunction: 'linear' }); var length = this.data.noticeArray.length; var height = wx.getSystemInfoSync().windowWidth / 750 * 60; // 60rpx animation.translateY(-length * height).step(); this.setData({ noticeAnimation: animation.export() }); setTimeout(() => { this.setData({ noticeAnimation: {} }); this.scrollNotice(); }, length * 1000); },

scrollToTitle: function(e) { var index = e.currentTarget.dataset.index; wx.pageScrollTo({ selector: '#title-' + index }); } });

wxss代码：

.notice-wrapper { width: 100%; height: 60rpx; overflow: hidden; }

.notice { width: 100%; height: 60rpx; line-height: 60rpx; white-space: nowrap; animation-duration: 0s; }

.icon-wrapper { display: flex; justify-content: space-between; align-items: center; margin: 20rpx; }

.icon { display: flex; flex-direction: column; align-items: center; }

.search-wrapper { display: flex; justify-content: center; align-items: center; margin: 20rpx; }

.search-input { width: 600rpx; height: 60rpx; padding: 0 20rpx; border: none; border-radius: 30rpx; background-color: #f2f2f2; font-size: 28rpx; }

.tag-wrapper { display: flex; overflow-x: auto; white-space: nowrap; margin: 20rpx; }

.tag { display: inline-block; padding: 10rpx 20rpx; margin-right: 20rpx; border-radius: 50rpx; background-color: #f2f2f2; font-size: 28rpx; }

.title-wrapper { margin: 20rpx; }

.title { font-size: 32rpx; font-weight: bold; margin-bottom: 20rpx; }

.icon { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; }

.icon image { width: 100rpx; height: 100rpx; margin-bottom: 10rpx; }

.icon text { font-size: 28rpx;