微信小程序学习笔记5：实现本地生活首页布局

给你一杯BUG

已于 2022-07-18 10:19:27 修改

阅读量643

点赞数

分类专栏：微信小程序学习笔记文章标签：微信小程序

于 2022-07-18 10:17:48 首次发布

本文链接：https://blog.csdn.net/qq_52077925/article/details/125837443

版权

1 首页效果以及实现步骤

2 代码如下

（1）WXML

<!-- 滚动区域 -->
<swiper indicator-dots circular autoplay>
  <swiper-item wx:for="{
  {swiperList}}" wx:key="id">
    <image src="{
  {item.image}}"></image>
  </swiper-item>
</swiper>

<!-- 九宫格区域 -->
<view class="grid-list">
  <view class="grid-item" wx:for="{
  {gridList}}" wx:key="id">
    <image src="{
  {item.icon}}"></image>
    <text>{
  {item.name}}</text>
  </view>
</view>

<!-- 图片区域 -->
<view class="img-box">
  <image src="/images/link-01.png" mode="widthFix"></image>