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

注意!!!

只有样式,还没功能开发!!!

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;
}
相关推荐
文心快码BaiduComate2 小时前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
Emma歌小白2 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子2 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差3 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI3 天前
【小程序】微信小程序隐私协议
微信小程序·小程序