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

注意!!!

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

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;
}
相关推荐
nbsaas-boot24 分钟前
[特殊字符] 分享裂变新姿势:用 UniApp + Vue3 玩转小程序页面分享跳转!
小程序·uniapp·notepad++
老A技术联盟27 分钟前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
you458029 分钟前
小程序学习笔记:使用 MobX 实现全局数据共享,实例创建、计算属性与 Actions 方法
笔记·学习·小程序
风铃喵游30 分钟前
构建引擎: 打造小程序编译器
前端·小程序·架构
MonkeyKing_sunyuhua2 小时前
微信小程序能不能获取物联网的上的设备数据
物联网·微信小程序·小程序
paopaokaka_luck2 小时前
基于SpringBoot+Vue的酒类仓储管理系统
数据库·vue.js·spring boot·后端·小程序
mg6682 小时前
微信小程序入门实例_____从零搭建你的第一个微信小程序
微信小程序·小程序
you45803 小时前
小程序学习笔记:API 的 Promise 化
笔记·学习·小程序
皮皮灬虾3 小时前
微信小程序下单页—地址列表页—新增地址页 页面交互
微信小程序·小程序·交互
源码_V_saaskw9 天前
宇鹿家政服务系统小程序ThinkPHP+UniApp
微信小程序·小程序·uni-app·微信公众平台