滑动组件:scroll-view

wxml代码

<view>
<scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
<view class="tab-item {{currentTab==0?'active':''}}" data-current="" bindtap="swichNav">健康</view>
<view class="tab-item {{currentTab==1?'active':''}}" data-current="" bindtap="swichNav">情感</view>
<view class="tab-item {{currentTab==2?'active':''}}" data-current="" bindtap="swichNav">职场</view>
<view class="tab-item {{currentTab==3?'active':''}}" data-current="" bindtap="swichNav">育儿</view>
<view class="tab-item {{currentTab==4?'active':''}}" data-current="" bindtap="swichNav">纠纷</view>
<view class="tab-item {{currentTab==5?'active':''}}" data-current="" bindtap="swichNav">青葱</view>
<view class="tab-item {{currentTab==6?'active':''}}" data-current="" bindtap="swichNav">全部</view>
<view class="tab-item {{currentTab==7?'active':''}}" data-current="" bindtap="swichNav">其他</view>
</scroll-view>
</view>

js代码

page({
data:{
currentTab:
}
})

wxss代码

.tab-h{height: 80rpx;width: %; box-sizing: border-box;overflow: hidden;line-height: 80rpx;background: #F7F7F7; font-size: 16px; white-space: nowrap;position: relative;top: ; left: ; z-index: ;}
.tab-item{margin: 36rpx;display: inline-block;}
.tab-item.active{color: #4675F9;position: relative;}
.tab-item.active:after{ content: "";display: block;height: 8rpx;width: 52rpx;background: #4675F9;position: absolute; bottom: ;left: 5rpx;border-radius: 16rpx;}

参考地址:https://blog.csdn.net/sophie_u/article/details/71745125

幻灯片组件:swiper

js代码:

Page({
data: {
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000
}, })

  

wxml代码

<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>

  

参考手册:https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html

图片自定义高度

图片实际imgW:1080px   imgH:300px;

小程序屏幕宽度750

小程序图片高度 = 750/(1080/300)

// 如
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="bindchange" style="height:{{750/(vo.floor_swiper[0].imgW/vo.floor_swiper[0].imgH)}}rpx;" data-d="{{v.img_height}}">

小程序图片高度设定

方法一:在后台直接填写参数(推荐使用)

方法二:小程序js计算

小程序笔记三:幻灯片swiper 和图片自定义高度的更多相关文章

  1. 微信小程序笔记<三>入口app.js —— 注册小程序

    小程序开发框架在逻辑层使用的语言就是JavaScript,所以想玩小程序JavaScript的基本功一定要扎实.但小程序基于js做了一些修改,以方便开发者更方便的使用微信的一些功能,使得小程序更好的贴 ...

  2. 解决微信小程序安卓手机访问不到图片,无法显示图片

    关于微信小程序不显示图片 通病可能有以下几个可能性: 非本地图片:确定图片资源存在,copy 图片url再浏览器打开,确定图片资源存在且能正常访问 本地图片:确定相对路径或者绝对路径正确 微信小程序图 ...

  3. 微信小程序把玩(三)tabBar底部导航

    原文:微信小程序把玩(三)tabBar底部导航 tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 ...

  4. 小程序学习三 一切的开始app() 小程序的注册

    现在打开 app.js //app.js App({ onLaunch(options) { //小程序初始化 // console.log("小程序初始化", options) ...

  5. 微信小程序从零开始开发步骤(四)自定义分享的功能

    上一章节,实现了小程序的底部导航的功能,这一节开始实现一些简单的功能.本章节介绍的是小程序的自定义分享的功能. 可以分享小程序的任何一个页面给好友或群聊.注意是分享给好友或群聊,并没有分享到朋友圈.一 ...

  6. 前端笔记之微信小程序(三)GET请求案例&文件上传和相册API&配置https

    一.信息流小程序-GET请求案例 1.1服务端接口开发 一定要养成接口的意识,前端单打独斗出不来任何效果,必须有接口配合,写一个带有分页.关键词查询的接口: 分页接口:http://127.0.0.1 ...

  7. 微信小程序入门三实战

    微信小应用借鉴了很多web的理念,但是其与传统的webApp.微信公共号这些BS架构不同,他是CS架构,是客户端的程序 小程序开发实战--豆瓣电影 项目配置 -在app.jsop中进行简单配置 --n ...

  8. 我的微信小程序第三篇(app.json)

    前言 端午节回家了,所以好多天没有更新,只想说还是待在家里舒服呀,妈妈各种做好吃的,小侄子侄女各种粘着我在室外玩,导致我三天下来不仅胖了一圈,还黑了一圈,上班第一天有同事就说我晒黑了,哭~~~,为了防 ...

  9. 微信小程序笔记<二>认识app.json

    *.json文件在小程序开发中必不可少,从 app.json 开始认识小程序中的配置文件*.json: app.json 为小程序必须文件,它不仅作为配置文件管理着小程序的UI还充当着路由器的功能: ...

随机推荐

  1. iOS 导航栏返回到指定页面的方法和理解

    关于ios中 viewcontroller的跳转问题,其中有一种方式是采用navigationController pushViewController 的方法,比如我从主页面跳转到了一级页面,又从一 ...

  2. Linux下如何查看tomcat是否启动,并杀死重启

    在Linux系统下,遇到过这样的问题,项目中使用 ./shutdown.sh 关闭Tomcat失败 Using CATALINA_BASE: /usr/local/tomcat Using CATAL ...

  3. Java中ArrayList实现原理

    简述: ArrayList可以理解为动态数组,与Java中的数组相比,它的容量能动态增长.超出限制时会增加50%容量,用System.arraycopy()复制到新的数组中,因此最好能给出数组大小的预 ...

  4. Java编程的逻辑 (75) - 并发容器 - 基于SkipList的Map和Set

    ​本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...

  5. Hive Tunning 补充 关于bucket

    在前面的几篇文章当中一直有一个概念bucketing不清楚到底是怎么回事. 网友南京-李先森给了他收集的一些资料,如下: Buckets 对指定列计算 hash,根据 hash 值切分数据,目的是为了 ...

  6. Android训练课程(Android Training) - 高效的显示图片

    高效的显示图片(Displaying BitmapsEfficiently) 了解如何使用通用的技术来处理和读取位图对象,让您的用户界面(UI)组件是可响应的,并避免超过你的应用程序内存限制的方式.如 ...

  7. mssqlserver获取表说明和行数

    SELECT a.*,t.rows FROM ( ) ) AS a left join (, )) ) AS t ON a.表名=t.name

  8. 虚拟机创建及安装ELK

    虚拟机创建及安装ELK 作者:高波 归档:学习笔记 2018年5月31日 13:57:02 快捷键: Ctrl + 1    标题1 Ctrl + 2    标题2 Ctrl + 3    标题3 C ...

  9. 最近玩Bootstrap , 一些小工具 记录在案。

    最近玩Bootstrap , 一些小工具 记录在案. 1 定制Bootstrap ,所见即所得的修改Bootstrap的各种变量,即时查看样式的变化. http://bootswatchr.com/ ...

  10. CentOS 7系统LAMP配置PHP-FPM的示例

    CentOS 7 系统出来有一段时间了,今天我们来看在vps中的 CentOS 7 中给lamp环境配置php-fpm的过程,希望文章可以帮助到各位. CentOS 7 已经发布,并且采用 Apach ...