微信小程序基础：思维导图
实现：
效果图
我们将模块分解，实际要实现轮播图、首页导航分区、模块间的小白条、首页入口分区，与底部tab导航栏
1. 添加轮播图
用列表渲染 wx:for 更高效，
<!-- 首页轮播图分区 --> <view class='slider'> <swiper indicator-dots="true" autoplay="{{ true }}" interval="2500" duration="400" circular> <swiper-item wx:for="{{ sliderList }}" wx:key="id" > <image src="{{ item.image }}" width="375" height="150" mode="aspectFill" lazy-load /> </swiper-item> </swiper> </view>
2. 首页导航分区
<!-- 首页导航分区 --> <view class='index-nav bgw'> <navigator wx:for="{{ navList }}" wx:key="id" class='nav-item bdr' url='/pages/shopList/shopList?cat={{ item.id }}&title={{ item.name }}'> <image src='{{ item.icon }}' lazy-load></image> <text>{{ item.name }}</text> </navigator> </view>
3. 模块间小白条
以为此模块用到的地方比较多，所以我们可以封装到app.wxss里作为共有样式使用
wxml里
<view class='divider'></view>
wxss里
/* 功能封装2：专门用于做间隔的类，设定高度，填充底色 */ .divider { height: 20rpx; background-color: #f1f1f1; box-shadow: 0 5rpx 5rpx rgba(0, 0, 0, 0.1) inset; }
4. 首页入口分区
<!-- 首页入口分区 --> <view class='index-enter bgw'> <navigator class='enter-item'> <image src='/assets/images/link-01.png'></image> </navigator> <navigator class='enter-item'> <image src='/assets/images/link-02.png'></image> </navigator> </view>
5. tabBar
这个要到 app.json 里去改代码
在{ }里添加 “tabBar”及其属性
"tabBar": { "color": "#999", "selectedColor": "#333", "borderStyle": "black", "position": "bottom", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "assets/tabs/home.png", "selectedIconPath": "assets/tabs/home-active.png" }, { "pagePath": "pages/message/message", "text": "消息", "iconPath": "assets/tabs/message.png", "selectedIconPath": "assets/tabs/message-active.png" }, { "pagePath": "pages/profile/profile", "text": "个人中心", "iconPath": "assets/tabs/profile.png", "selectedIconPath": "assets/tabs/profile-active.png" }, { "pagePath": "pages/contact/contact", "text": "大杂烩", "iconPath": "assets/tabs/contact.png", "selectedIconPath": "assets/tabs/contact-active.png" } ] },
源代码
index.js
上面的导航栏均是用的小程序接口接收的后台json数据，再用列表渲染 wx:for 循环输出的
index.wxss
/* ！！小程序的图片记得设置宽高 */ .slider, .slider image , .slider swiper{ width: 100%; height: 390rpx; } .index-nav { /* 1.5. 给当前父元素设置成伸缩盒模式 */ display: flex; /* 1.6. 设置子元素换行能排列 */ flex-wrap: wrap; } .index-nav .nav-item { width: 33.33333%; height: 200rpx; /* 1.1. 给当前父元素设置成伸缩盒模式 */ display: flex; /* 1.2. 设置垂直排列 */ flex-direction: column; /* 1.3.设置主轴居中 */ justify-content: center; /* 1.4.设置交叉轴居中 */ align-items: center; /* 1.7微信小程序的字号大小官方推荐使用 px */ font-size: 14px; /* 2.0.底部边框，直接通过border-bottom */ border-bottom: 1rpx solid #ddd; } .index-nav .nav-item:nth-child(3n)::after { /* 2.4每隔第三个元素去除边框 */ width: 0; } /* ！！小程序的图片记得设置宽高 */ .index-nav image { width: 80rpx; height: 80rpx; margin-bottom: 10rpx; } /* ------------- * 模块3：首页入口分区 * ------------- */ .index-enter { display: flex; padding: 20rpx 25rpx; } .index-enter .enter-item { width: 50%; display: flex; justify-content: center; } .index-enter image { width: 320rpx; height: 178rpx; }
index.wxml
<!-- 首页轮播图分区 --> <view class='slider'> <swiper indicator-dots="true" autoplay="{{ true }}" interval="2500" duration="400" circular> <swiper-item wx:for="{{ sliderList }}" wx:key="id" > <image src="{{ item.image }}" width="375" height="150" mode="aspectFill" lazy-load /> </swiper-item> </swiper> </view> <!-- 首页导航分区 --> <view class='index-nav bgw'> <navigator wx:for="{{ navList }}" wx:key="id" class='nav-item bdr' url='/pages/shopList/shopList?cat={{ item.id }}&title={{ item.name }}'> <image src='{{ item.icon }}' lazy-load></image> <text>{{ item.name }}</text> </navigator> </view> <view class='divider'></view> <!-- 首页入口分区 --> <view class='index-enter bgw'> <navigator class='enter-item'> <image src='/assets/images/link-01.png'></image> </navigator> <navigator class='enter-item'> <image src='/assets/images/link-02.png'></image> </navigator> </view>
