小程序-首页小列表查看更多

<view class="brand-view home-view"><view class="brand-view-head"><view><text class="brand-view-head-text">热搜品牌 </text><image class="brand-view-head-img" src="../../images/home/hot.png"></image></view><text class="brand-view-head-more">查看更多</text></view><view class="brand-view-body"><view class="brand-view-body-item app-c" wx:for="{{themeArr}}"><image class="brand-view-body-img" src="{{item.url}}"></image><text  class="brand-view-body-text">{{item.text}}</text></view></view>
</view>

.brand-view {border-radius: 10px;margin-bottom: 20rpx;
}.brand-view-head {margin-left: 26rpx;margin-right: 26rpx;padding-top: 18rpx;padding-bottom: 18rpx;display: flex;justify-content: space-between;
}.brand-view-head-img {width: 28rpx;height: 28rpx;vertical-align: middle;
}.brand-view-head-text {color: #333333;font-size: 28rpx;margin-right: 12rpx;}.brand-view-head-more {color: #888888;font-size: 22rpx;line-height: 40rpx;}.brand-view-body {display: flex;justify-content: space-between;margin-left: 26rpx;margin-right: 26rpx;
}
.brand-view-body-item{text-align: center;margin-top: 18rpx;
}.brand-view-body-img {width: 120rpx;height: 120rpx;background: #FFFFFF;border: 1rpx solid #E5E5E5;border-radius: 20rpx;margin-bottom: 14rpx;}.brand-view-body-text {font-size: 24rpx;color: #333333;margin-bottom: 40rpx;/* white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;width: 120rpx;*/
}

小程序-首页小列表查看更多相关推荐

微信小程序（一）初步，包括（初步了解微信小程序，小程序项目结构，小程序宿主环境，发布与上线等）
文章目录前言一微信小程序 1. 小程序与普通网页开发的区别 2. 注册小程序开发帐号 3. 安装开发者工具 4. 创建小程序项目 5. 查看项目效果 6. 主界面的 5 个组成部分二项目结构 ...
微信小程序一小程序的创建、宿主环境、常用组件、开发上线等
小程序简介 1. 小程序与普通网页开发的区别运行环境不同网页运行在浏览器环境中小程序运行在微信环境中 API 不同由于运行环境的不同,所以小程序中, 无法调用 DOM 和 BOM 的 API. ...
【小程序】小程序起步、WXML模板语法和WXSS模板样式
文章目录一.小程序-起步 1.1 小程序和普通网页开发的不同 1.2 项目的基本组成部分 1.3 小程序的宿主环境 1.3.1 通信模型 1.3.2 运行机制 1.3.3 常用的视图容器类组件vie ...
【微信小程序】 —— 小程序的构成
1.1.小程序的构成 -- 项目构成 pages用来存放所有的小程序的页面 utils用来存放工具性质的模块(例如:格式化时间的自定义模块) app.js小程序的入口文件 app.json小程序的全局 ...
微信小程序显示分页列表
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
餐饮小程序首页仿饿了么
餐饮小程序首页仿饿了么,通常包括以下内容: 商家logo和名称:显示在页面顶部,用于品牌认知. 轮播图:通常位于页面中部,用于展示商家的特色菜品或促销活动. 分类导航:一般位于页面底部,方便用户快速浏 ...
newduba首页怎么去掉_京喜小程序首页瘦身实践
前言在 web 开发场景,减少代码体积虽然是性能优化的一个方向,还没到锱铢必较的程度.但是在小程序场景,由于代码包上传阶段限制了主包 2M 和总包 16M(近期微信官方正在内测将总包上限调整至 20 ...
微信小程序新闻信息列表展示
微信小程序信息展示列表 wxml  <view class='haibao' bindtap="seeDetail" id="{ ...
微信小程序场景值列表map格式
通过场景值code,获取对应描述 const list = [[1000, "其他"],[1001, "发现栏小程序主入口,「最近使用」列表(基础库2.2.4版本起包含「 ...

小程序-首页小列表查看更多

小程序-首页小列表查看更多相关推荐

最新文章

热门文章