微信小程序首页之轮播图和搜索框代码分享

旧人232025-04-30 8:36

注意！！！

只有样式，还没功能开发！！！

index.wxml

html 复制代码

<!-- 搜索框 -->
<view class="search">
    <input placeholder="请输入搜索的内容"></input>
    <image src="cloud://cloud1-9gcgvxkfa8171ca2.636c-cloud1-9gcgvxkfa8171ca2-1309683288/img/search.png"
    style=" width: 50rpx; height: 50rpx; "></image>
</view>

<!-- 轮播图 -->
<view class="banner">
    <swiper style="height: 300rpx; width: 800rpx; border: 10rpx;" autoplay circular interval="2000">
        <swiper-item wx:for="{{banner}}" >
            <image src="{{item.src}}" class="img"></image>
        </swiper-item>
    </swiper>
</view>

index.js

bash 复制代码

// index.js
wx.cloud.init({
    env: 'cloud1-9gcgvxkfa8171ca2', //填上自己的的云开发环境id
    traceUser: true,
  })
const db = wx.cloud.database()
Page({
  data: {
    banner: []
  },
  onLoad: function() {
    let that = this
    db.collection('swiper').get({
        success:function(res){
            console.log('轮播图获取成功', res)
            that.setData({
                banner: res.data
            })
        },
        fail:function(res){
            console.log('轮播图获取失败', res)
        },
    })
  }
})

index.wxss

XML 复制代码

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
/* 搜索框 */
.search {
    width: 80%;
    height: 60rpx;
    display: flex;
    flex-direction: row;
    border: 1px solid slategray;
    border-radius: 50rpx;
    padding-left: 50rpx;
    padding-right: 40rpx;
    align-items: center;
    align-self: center;
    justify-content: space-between;
}

/* 首页轮播图 */
.banner {
    width: 90%;
    display: flex;
    align-self: center;
    margin-top: 50rpx;
}
/* 图片高度宽度 */
.img {
    height: 300rpx;
    width: 700rpx;
    border-radius: 10rpx;
}

微信小程序 首页之轮播图和搜索框 代码分享

微信小程序首页之轮播图和搜索框代码分享