先来个效果图:
使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式!
直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发!
wxml:
<view class='indexcontainer'><!-- 顶部推荐图片轮播 --><view class='selection'><swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"><block wx:for="{{imgUrls}}" wx:key="*this"><swiper-item> <image src="{{item}}" class="slide-image" mode='scaleToFill' /></swiper-item></block></swiper></view><!-- 第二部分--><view class='selection'><!-- 头部文字 --><view class="header"><text style='margin-left: 5px;'>英杰之诗</text><text class='all'>英雄的回忆</text></view><!-- 内容 --><view class='content'><view class='content-item' wx:for="{{contentImgUrls}}" wx:key="url" wx:for-item="item"><!--