当前位置：首页 > news >正文

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

news 来源：原创 2025/4/30 11:11:17

注意！！！

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

index.wxml

<!-- 搜索框 -->
<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

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

index.wxss

/**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;
}