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

注意!!!

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

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;
}
相关推荐
一念杂记3 小时前
【实战系列】30分钟开发微信小程序登录&注册&绑定功能
前端·后端·微信小程序
小白_ysf4 小时前
uniapp开发微信小程序(新旧版本对比:授权手机号登录、授权头像和昵称)
微信小程序·小程序·uni-app
hongkid4 小时前
微信小程序私密消息
微信小程序·小程序
kilito_014 小时前
uniapp 微信小程序 列表点击分享 不同的信息
微信小程序·小程序·uni-app
二饭4 小时前
微信小程序动态切换窗口主题色
微信小程序·小程序
白日依山尽yy4 小时前
Vue、微信小程序、Uniapp 面试题整理最新整合版
vue.js·微信小程序·uni-app
新手小黑吖4 小时前
vscode开发微信小程序
vscode·微信小程序
2501_916013745 小时前
移动端 WebView 调试实战,多平台行为差异排查与统一调试流程
android·ios·小程序·https·uni-app·iphone·webview
资深前端之路12 小时前
小程序生命周期及页面操作执行过程详解
小程序
给力学长15 小时前
自习室预约小程序的设计与实现
java·数据库·vue.js·elementui·小程序·uni-app·node.js