首页代码块-CSDN博客

本文链接：https://blog.csdn.net/qq_61581770/article/details/134171539

顶部轮播图

使用block组件嵌套for循环，自动加载swiper-item项

<swiper indicator-dots="true" autoplay="true" indicator-active-color="9CF91A " circular="true">
    <block wx:for="{{foodurl}}" wx:key="{{foodurl}}">
      <swiper-item bind:tap="GotoFood">
        <image src="{{item.url}}" mode="widthFix" />
      </swiper-item>
    </block>
  </swiper>

这里图片来源是index.js里的data，如下所示

  data: {
    foodurl: [{
      url: "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F1031%2F16389a3bj00s3dmrn002kc000oo00e3m.jpg&thumbnail=660x2147483647&quality=80&type=jpg"
    }, {
      url: "https://img4.pconline.com.cn/pconline/images/product/20231019/14147772.png?x-oss-process=image/watermark,image_d2F0ZXJtYXJrL3BjX2Jlc3QucG5n"
    }, {
      url: "https://img4.pconline.com.cn/pconline/images/product/20231019/14147729.png?x-oss-process=image/watermark,image_d2F0ZXJtYXJrL3BjX2Jlc3QucG5n"
    }]
  },

轮播图点击跳转页面

在image或者swiper-item中绑定一个bindtap事件，在js页面该事件的实现中采用wx.NavigateTo函数实现跳转。

wxml

<swiper-item bind:tap="gotohuishou">
        <image src="{{item.ImageURL}}" mode="widthFix" />
</swiper-item>

搜索框

一个输入框和一张搜索图标的图片组成。

输入框捕获用户输入信息，当用户点击图片时则携带信息跳转。

<view class="search_root">
    <input class="search_input" type="text" />
    <image class="search_image" src="/image/搜索.png" mode="" />
</view>

通过wxss将搜索框和图标放在同一行，并且调整间距边角半径等属性美化。

.search_root{
display: flex;
flex-direction: row;
padding: 20rpx;
align-items: center;
}
.search_input{
  border: 1rpx solid #009688;
  height: 70rpx;
  border-radius: 15rpx;
  flex: 1;
}
.search_image{
  width: 75rpx;
  height: 75rpx;
  margin-left: 20rpx;
}

gotohuishou(){
    wx.navigateTo({
      url: '/pages/huishou/huishou',
    })
  },

新页面的导航标题可在新页面的json修改

九宫格

纯view组件堆，靠wxss拼接

wxml布局

<view class="search_root">
    <input class="search_input" type="text" />
    <image class="search_image" src="/image/搜索.png" mode="" />
  </view>
  <view class="multtool_root">
    <view class="multtool_item">
      <image src="/image/回收商.png" mode="" />
      <text>回收商品 </text>
    </view>
    <view class="multtool_item">
      <image src="/image/回收商.png" mode="" />
      <text>回收商品 </text>
    </view>
    <view class="multtool_item">
      <image src="/image/回收商.png" mode="" />
      <text>回收商品 </text>
    </view>
  </view>

wxss布局

.multtool_root {
  display:flex
}
.multtool_item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 250rpx;
}
.multtool_item image{
  width: 150rpx;
  height: 150rpx;
}
.multtool_item text{
  font-size: 33rpx;
}

实现效果