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

注意!!!

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

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;
}
相关推荐
2501_9159184132 分钟前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张1 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
微三云-轩1 小时前
区块链:重构企业数字化的信任核心与创新动力
人工智能·小程序·区块链·生活·我店
阿隆_趣编程4 小时前
为了方便相亲,我用AI写了一款小程序
前端·javascript·微信小程序
2501_9159184121 小时前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui520861 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
一口十个小甜虾1 天前
微信小程序体验版,当打开调试模式正常访问,关闭之后无法访问
微信小程序·小程序
悟空码字1 天前
微信开放平台第三方平台,可以管理多个微信小程序
微信·小程序·开放平台
じòぴé南冸じょうげん1 天前
微信小程序如何进行分包处理?
前端·小程序
说私域1 天前
基于开源AI大模型AI智能名片S2B2C商城小程序的参与感构建研究
人工智能·小程序·开源