零基础也能学会的微信小程序制作横向滚动布局

零基础也能学会的微信小程序制作横向滚动布局
准备工作：

微信开发者工具
APPID或测试号
创建一个JavaScript基本框架（如下图）
动手做起来吧~

index.wxml

最终效果：

<!--index.wxml-->
<view class="container">
<view class="body">
<view class="Hot">我的推荐</view><!-- 横向滚动布局-博客地址：foxihaohao.com --><scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%"><view class="scroll-view-item_H"><image style="margin-left: 15px;" src=""></image></view><view class="scroll-view-item_H"><image src=""></image></view><view class="scroll-view-item_H"><image src=""></image></view><view class="scroll-view-item_H"><image src=""></image></view><view class="scroll-view-item_H"><image src=""></image></view><view class="scroll-view-item_H"><image style="margin-right: 15px;" src=""></image></view></scroll-view></view>
</view>

index.wxss

/**index.wxss**/
.body {width: 100%;height: 100px;padding-top: 45rpx;border-radius: 15px;/* background-color: rgb(228, 190, 190); */
}.Hot {padding-bottom: 20px;margin-left: 10px;font-size: 15px;color: #818181;
}.body image {width: 80px;height: 80px;border-radius: 20px;margin-left: 5px;margin-right: 10px;/* margin-top: 10px; *//* margin-bottom: 5px; */
}.scroll-view_H {white-space: nowrap;/* background-color: rgb(226, 226, 226); */width: 100%;
}.scroll-view-item {height: 150px;
}.scroll-view-item_H {/* 设置横向 */display: inline-block;/* 间隔宽度 *//* width: 50%; *//* 高度 */height: 80%;
}.usermotto {margin-top: 200px;
}

快来实现您的视觉效果吧~

零基础也能学会的微信小程序制作横向滚动布局相关推荐

零基础也能学会的微信小程序制作带分享按钮的视频列表页
零基础也能学会的微信小程序制作横向滚动布局准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 动手做起来吧~ index.wxml 学习笔记属性说明 s ...
零基础也能学会的微信小程序制作动态搜索页
零基础也能学会的微信小程序制作动态搜索页准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 最终效果: 动手做起来吧~ index.wxml <vi ...
微信小程序scroll-view 横向滚动显示下拉条的问题
微信小程序开发中,scroll-view的横向滚动,是一个常见的排列布局的方式,其实现的代码如下: wxml部分: <scroll-view class="scroll-view_H& ...
微信小程序实现横向滚动文字
1.实现效果 2.实现思路父元素设置overflow: hidden; 子元素添加一个动画,translateX 3.实现代码 <view class="box flex-row&q ...
微信小程序scroll-wiew 横向滚动问题
今天做项目用到了横向滚动,用到scroll-view 组件. 首先,scroll-view 开启横向滚动,设置style 段落不换行. <scroll-view scroll-x="t ...
【微信小程序】横向/纵向布局（98/100）
 <text>flex-direction: row\n横向布局</text ...
php小程序 100行左右,微信小程序左右分类滚动列表
今天需求个类似得到app分类的功能,效果如图: 左右分别滚动,互不干扰,先把简单的布局和样式搭好. 左侧分类右侧顶部分类右侧列表 .flex_row{display: flex;flex-dire ...
微信小程序 View：flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...
微信小程序制作——获取用户信息
微信小程序制作--获取用户信息 1.获取用户信息方式一 wxml <view bindtap="getUserName">获取当前用户名</view> j ...

零基础也能学会的微信小程序制作横向滚动布局

零基础也能学会的微信小程序制作横向滚动布局相关推荐

最新文章

热门文章