#704
展开↯#705
作者：广西南宁市
JS获取浏览器窗口大小
// 获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
// 获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
// 通过深入 Document 内部对 body 进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}Run code
Cut to clipboard
原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我说怎么取不出高度来,原来是写成了<HTML>Run code
Cut to clipboard
文章：js获取浏览器高度和宽度值 发表时间：2017-12-23, 17:49:40
#706
作者：广西南宁市
都在我设计动作范围之内
智能商业有三个特征：
利用互联网和算法的优势，低成本实时服务海量用户；
满足每一个用户的个性需求；
快速迭代，自我更新，自我提升。
2017 year progress
▓▓▓▓▓▓▓▓▓▓▓▓▓▓░ 96%
智能商业有三个特征：
利用互联网和算法的优势，低成本实时服务海量用户；
满足每一个用户的个性需求；
快速迭代，自我更新，自我提升。
2017 year progress
▓▓▓▓▓▓▓▓▓▓▓▓▓▓░ 96%
文章：迅雷邹胜龙的错过 发表时间：2017-12-18, 09:45:38
#707
作者：广西南宁市
类似上滑解锁，网站首页首屏鼠标滚动上拉收起卷帘门效果 斯坦福大学的首页
<html>
<body>
<style>*{padding:0px;margin:0px;}html,body{width:100%;height:100%;}
.header{position:fixed;left:0;right:0;line-height: 40px;top:0;border:1px solid #000;background: #39464e;z-index:3;}
.splash_screen{position:relative;z-index: 2;width:100%;height: 100%;line-height:400px;text-align:center;background:#ffa200;}
.content{margin-top:60px;height: 2400px;width:100%;z-index:1;background:green;}
.content_fix{position: fixed;top:50px;margin-top:0;}
.content_shadow{height: 2900px;}
</style>
<div class="header">header</div>
<div class="splash_screen"><img src="http://out.img.pan.lizhenqiu.com/4a2ac65e68cd31509eb1039cd348cde5" width="100%" height="100%"></div>
<div class="content content_fix" style="
text-align: center;
"><br>content<br><img src="http://out.img.pan.lizhenqiu.com/cd0a877c06b8a3582804c18ba7ee4b96" width="80%"><br><img src="http://out.img.pan.lizhenqiu.com/fccab3de7ec87d6270d444a645bb1339" width="80%"></div>
<div class="content_shadow"></div>
<script>$(document).on('scroll', function () {
if ($(document).scrollTop() > $('.splash_screen').height()) {
$('.content').removeClass('content_fix')
$('.content_shadow').css('height', 0)
} else {
$('.content').addClass('content_fix')
$('.content_shadow').css('height', $('.content').outerHeight())
}
})
</script></body></html>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-12-22, 10:39:05
#708
作者：广西南宁市
无论理论再多，产品都是由人做出来的，软件只是辅助工具，如果纯粹的依赖软件，人的积极性就会降低，就会产生依赖性，就会学会甩锅。人的主动意识是人工智能永远也学不会的。
文章：软件开发模式变迁史 发表时间：2017-12-20, 16:04:30
#709
作者：广西南宁市
比如说：一个人A为父类，他的儿子B，妻子C，私生子D（注：D不在他家里）
如果我们给A的事情增加修饰符：
public事件，地球人都知道，全公开
protected事件，A，B，D知道（A和他的所有儿子知道，妻子C不知道）
private事件，只有A知道（隐私？心事？）
internal事件，A，B，C知道（A家里人都知道，私生子D不知道）
protected internal事件，A，B，C，D都知道,其它人不知道
如果我们给A的事情增加修饰符：
public事件，地球人都知道，全公开
protected事件，A，B，D知道（A和他的所有儿子知道，妻子C不知道）
private事件，只有A知道（隐私？心事？）
internal事件，A，B，C知道（A家里人都知道，私生子D不知道）
protected internal事件，A，B，C，D都知道,其它人不知道
文章：<?= 和<?php 的区别 发表时间：2017-12-21, 14:31:02
#710
作者：广西南宁市
<!--pages/product/product.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="../images/ab_banner.jpg" background-size="cover" background-position="center"></image>
<!-- <text class="userinfo-nickname">{{userInfo.nickName}}</text>-->
</view>
<view class="usermotto">
<text class="user-motto" >{{titlessss}}</text>
</view>
<text class="pice{{jzzz}}">加载中 </text>
<block wx:for="{{all}}">
<view class="companyprofile"> <!-- pice{{jzzzs}}-->
<view class="left">
<image class="companyimg" src="https://hhh.liangtianmei.com{{item.imgurl}}" background-size="cover"></image>
</view>
<view class="right">
<navigator url="../prodetail/prodetail?title={{item.title}}">
<text class="companytitle">{{item.title}}\n</text>
</navigator>
<text class="companymain">{{item.content}}</text>
<text class="pice">￥100 </text> <block wx:if="{{index==clickId}}"> <image id="{{index}}" class="shopimg" src="../images/red.png" bindtap="btn_primary"></image> </block>
<block wx:else> <image id="{{index}}" class="shopimg" src="../images/sp_0777.png" bindtap="btn_primary"></image> </block>
<view class="stepper" >
<text class="{{minusStatus}}" bindtap="bindMinusssss" id="{{index}}">-</text>
<!-- 减号
<block wx:if="{{index==clickId}}">
<text class="{{minusStatus}}" bindtap="bindMinus" id="{{index}}">-</text>
</block>
<block wx:else>
<text class="{{minusStatus}}" bindtap="bindMinus" id="{{index}}">-</text>
</block>-->
<!-- 数值 -->
<block wx:if="{{index==clickId}}">
<input type="number" bindchange="bindManual" value="{{num}}" id="{{index}}"/>
</block>
<block wx:else>
<input type="number" value="{{item.nnum}}" name="nnum" id="nnum{{index}}"/> <!--bindchange="bindManual" -->
</block>
<text class="normal" bindtap="bindPlussssss" id="{{index}}">+</text>
<!-- 加号
<block wx:if="{{index==clickId}}">
<text class="normal" bindtap="bindPlus" id="{{index}}">+</text>
</block>
<block wx:else> <text class="normal" bindtap="bindPlus" id="{{index}}">+</text> </block>-->
</view>
<!-- <view class="icon">
<image id="{{index}}" class="add" src="../images/add.png" bindtap="btn_primary"></image> <text class="companymain">1</text> <image id="{{index}}" class="minus" src="../images/minus.jpg" bindtap="btn_primary"></image>
</view>-->
<!--
<view class="icon">
<image src="../images/add.png" class="add-img {{item.numbers==0 ?'none':''}}" bindtap="reduceNum" data-index="{{index}}"></image>
<view class="num {{item.numbers==0?'none':''}}">{{item.id}}</view>
<image src="../images/minus.jpg" class="add-img" bindtap="addNum" data-index="{{index}}" data-index="{{index}}"></image>
</view>
-->
</view>
</view>
</block>
<!--
<view class="companyprofile">
<view class="left">
<image class="companyimg" src="../images/ab_01.jpg" background-size="cover"></image>
</view>
<view class="right">
<text class="companytitle">湖北早梗米\n</text>
<text class="companymain">浙江百慕生物科技有限公司隶属浙江丽珀集团，成立于2011年3月，注册资本1000万元，是一家从事海洋生物开发销售的公司，主要从事保健品（海参）产品的销售。</text>
<text class="pice">￥120 </text> <image class="shopimg" src="{{imageUrl}}" bindtap="btn_primary" ></image>
</view>
</view>
-->
<view class="footer">
<text class="footerword">版权所有©2016 全家科技发展有限公司</text>
</view>
</view>
Run code
Cut to clipboard
小程序购物者加减数量输入框获取value
微信小程序获取value 微信小程序如何获取单个input值
微信小程序—如何获取用户输入文本框的值
微信小程序获取用户输入 微信小程序怎么获取用户输入
//构造令牌 使用服务器时间戳
var utilMd5 = require('../../utils/md5.js');
var util = require('../../utils/util.js');
// pages/product/product.js
Page({
/**
* 页面的初始数据
*/
data: {
// tabs:["泰国香米","湖北早梗米"],
// clickId:0,//默认选中的键值，从零开始
// imageUrl:'../images/sp_0777.png'//默认图片
titlessss:'产品中心',
jzzzs:1,
num: 0,
// 使用data数据对象设置样式名
minusStatus: 'disabled' ,
inputTxt:0
},
/* 点击减号 */
bindMinus: function (event) {
var num = this.data.num;
// 如果大于1时，才可以减
if (num > 1) {
num--;
}
// 只有大于一件的时候，才能normal状态，否则disable状态
var minusStatus = num <= 1 ? 'disabled' : 'normal';
// 将数值与状态写回
this.setData({
num: num,
minusStatus: minusStatus,
clickId: event.currentTarget.id
});
},
bindMinusssss:function(e){
//new 2017.12.19
var id = e.currentTarget.id;
var all = this.data.all;
if (!all[id].nnum) all[id].nnum = 1;
var nv = all[id].nnum;
if(nv>1) nv-=1;
all[id].nnum=nv;
this.setData({
all: all
})
//e.detail = { nv, cursor }
//e.detail.value=100;
//console.log(all);
//console.log(e.currentTarget.dataset.value);
},
bindPlussssss: function (e) {
//new 2017.12.19
var id = e.currentTarget.id;
var all = this.data.all;
if (!all[id].nnum) all[id].nnum = 1;
var nv = all[id].nnum;
nv += 1;//记得判断是否超过库存
all[id].nnum = nv;
this.setData({
all: all
})
//e.detail = { nv, cursor }
//e.detail.value=100;
//console.log(all);
//console.log(e.currentTarget.dataset.value);
},
/* 点击加号 */
bindPlus: function (event) {
var num = this.data.num;
// 不作过多考虑自增1
num++;
// 只有大于一件的时候，才能normal状态，否则disable状态
var minusStatus = num < 1 ? 'disabled' : 'normal';
// 将数值与状态写回
this.setData({
num: num,
minusStatus: minusStatus,
clickId: event.currentTarget.id
});
},
/* 输入框事件 */
bindManual: function (event) {
//var clickId = event.detail.id;
// console.log(clickId)
var num = event.detail.value;
console.log(num)
var that = this;
// 将数值与状态写回
this.setData({
num: num,
clickId: event.currentTarget.id
});
} ,
btn_primary: function (event) {
console.log(event)
var that = this;
this.setData({
clickId: event.currentTarget.id,
// imageUrl: "../images/sp_07.png"//触发事件时的图片
})
} ,
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
var app = getApp();//获取app小程序实例
// WxParse.wxParse('content', 'html', content, that, 5)
wx.login({
success: function (res) {
if (res.code) {
//更新数据
var url = 'https://hhh.liangtianmei.com/index.php/Home/Product/index';
util.ntime(utilMd5, that,url);
}
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})Run code
Cut to clipboard
文章：微信小程序开发笔记 发表时间：2017-12-19, 12:19:38
#711
作者：广西南宁市
吕布的命，非想干曹操的事儿。
“那个人样子好怪。”
“我也看到了，他好像一条狗。”
到菜市场买菜，看到一个孩子在看摊，我问：“一只鸡多少钱？” 那孩子回答：“23。” 我又问：“两只鸡多少钱？” 孩子愣了一下，一时间没算过来，急中生智大吼一声：“一次只能买一只！”
「细思极恐」
你的对手在看书
你的仇人在磨刀
你的闺蜜在减肥
隔壁老王在练腰
13 , 憋说话，赔钱
“那个人样子好怪。”
“我也看到了，他好像一条狗。”
到菜市场买菜，看到一个孩子在看摊，我问：“一只鸡多少钱？” 那孩子回答：“23。” 我又问：“两只鸡多少钱？” 孩子愣了一下，一时间没算过来，急中生智大吼一声：“一次只能买一只！”
「细思极恐」
你的对手在看书
你的仇人在磨刀
你的闺蜜在减肥
隔壁老王在练腰
文章：不知妻美二手东，悔创阿里杰克马，一无所有王健林，普通家庭马化腾，不熟运作假药停 发表时间：2017-11-18, 00:24:35
#712
作者：广西南宁市
格力的手机，小米的空调，你会买哪个？2 , 一些日本非盈利社会组织，也决定承担责任。他们为中年处男开设裸模艺术课，提供“与真实的裸体女性最为接近的场合”。老处男们也希望挣扎一下，“自然地激发对异性的兴趣”。但实在低估了自己心如止水的程度，对宅久了的30代～40代的男性来说，区区裸体已经不能带来什么刺激了。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。色情泛滥的社会不是什么好社会，性冷淡的世界更是一片荒芜。
突然有一天小贩不送葱了…
突然有一天小贩不送葱了…
文章：雷军的本命年：轮回中的挫败、幸运和逆袭 发表时间：2017-12-15, 16:35:52
#713
展开↯#714
作者：广西南宁市
1942那样极度压抑却几乎没有批判的电影
文章：恍如隔世的《芳华》与不识时务的冯小刚 发表时间：2017-12-15, 12:00:47
#715
作者：广西南宁市
点击动画 放大缩小 煎蛋返回顶部
#nav_top span:active{font-size:20px}Run code
Cut to clipboard
文章：小火箭旋转翻动转动3D动画效果跟随返回顶部HTML 发表时间：2017-12-15, 17:39:45
#716
作者：广西南宁市
生长在非洲大草原上的灰犀牛，身躯庞大，给人一种行动迟缓、安全无害的错觉，从而时常忽略了危险的存在——当灰犀牛被触怒发起攻击时，却会体现出惊人的爆发力，阻止它的概率接近于零，最终引发破坏性极强的灾难。
文章：王健林的滑铁卢 发表时间：2017-12-14, 17:14:32
#717
作者：广西南宁市
百度地图API中不同marker的InfoWindow的显示内容不同的实现
用到百度地图。功能要求将一批标记点加入地图，点击其中任意一个点，地图弹出InfoWindow框，里面显示与此点相关的内容。
按照常规写了如下代码:上述写法很直观看起来没有问题，但遗憾的是，运行起来后，各个标记点虽然能够根据各自的坐标散布在地图上，但点击每个标记点所弹出的InfoWindow框里的信息则是nodes数组里面最后一个数组的元素的相应信息百度地图API中不同marker的InfoWindow的显示内容不同的实现。
上网查了一下，没有人给出具体解决，只是提出了javascript的闭包来解决。
于是采用闭包方式重新写了代码：
两行代码就搞定这个问题
用到百度地图。功能要求将一批标记点加入地图，点击其中任意一个点，地图弹出InfoWindow框，里面显示与此点相关的内容。
按照常规写了如下代码:
var node = function(){
name;
lng;
lat;
};
addmarks = function(nodes){
var _nodes = nodes;
var _markers = new Array();
for(var i=0;i<_nodes.length;i++){
var _marker = new BMap.Marker(new BMap.Point(_nodes[i].lng, _nodes[i].lat));
var _node = _nodes[i];
var _html = "节点名:"+_node.name;
_marker.addEventListener("click", function(e){
this.openInfoWindow(new BMap.InfoWindow(_html));
});
_marker.addEventListener("mouseover", function(e){
this.setTitle("坐标@ "+_node.lng+","+_node.lat);
});
_markers.push(_marker);
}
myClusterer = new BMapLib.MarkerClusterer(myMap, {markers:_markers});
myClusterer.setMaxZoom(17);
//myClusterer.setStyles(myStyles);
};Run code
Cut to clipboard
上网查了一下，没有人给出具体解决，只是提出了javascript的闭包来解决。
于是采用闭包方式重新写了代码：
addmarks = function(nodes){
var _nodes = nodes;
var _markers = new Array();
for(var i=0;i<_nodes.length;i++){
var _html = "节点名:"+_node.name;
shop_markers.push(createMark(_nodes[i], _html));
}
myClusterer = new BMapLib.MarkerClusterer(myMap, {markers:shop_markers});
myClusterer.setMaxZoom(17);
//myClusterer.setStyles(myStyles);
};
createMark = function(node, info_html){
var _marker = new BMap.Marker(new BMap.Point(node.lng, node.lat));
_marker.addEventListener("click", function(e){
this.openInfoWindow(new BMap.InfoWindow(info_html));
});
_marker.addEventListener("mouseover", function(e){
this.setTitle("位于: "+node.lng+","+node.lat);
});
return _marker;
};Run code
Cut to clipboard
marker = g.marker(new BMap.Point(data.ProductList[i].LongPoint, data.ProductList[i].LatPoint), { shadow: true });
map.addOverlay(marker); //添加图标
var initPoint = new BMap.Point(data.ProductList[i].LongPoint, data.ProductList[i].LatPoint);
var infoWindow = new BMap.InfoWindow(infoHtml); // 创建信息窗口对象
marker.addEventListener("click", function() {
map.setCenter(this.getPosition());
this.openInfoWindow(infoWindow, initPoint); Run code
Cut to clipboard
两行代码就搞定这个问题
_marker.provalue = _html;
map.addOverlay(_marker );
_marker .addEventListener('click', function () { this.openInfoWindow(new BMap.InfoWindow(this.provalue)); });Run code
Cut to clipboard
文章：百度地图显示多个标注点 发表时间：2017-12-15, 14:38:45
#718
作者：广西南宁市
火速贸易
宏越钢结构地图
点击收藏js按钮2 , 用CSS让文字在一行内显示不换行的方法
一般的文字截断(适用于内联与块)：
对于表格，定义有点不一样：
注：这个只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。 这个写法只有IE会有“...”，其它的浏览器文本超出指定宽度时会隐藏。
宏越钢结构地图
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(108.354387,22.79029),19);
var marker1 = new BMap.Marker(new BMap.Point(108.354387,22.79029)); //创建标注
map.addOverlay(marker1); // 将标注添加到地图中
//创建信息窗口
var infoWindow1 = new BMap.InfoWindow("广西宏越钢结构工程有限公司<br>电话：0771-5387865<br>地址：广西南宁市青秀区柳沙路8号");
marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);});
</script>Run code
Cut to clipboard
点击收藏js按钮
function addFavorite() {
var url = window.location;
var title = document.title;
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("360se") > -1) {
alert("由于360浏览器功能限制，请按 Ctrl+D 手动收藏！");
}
else if (ua.indexOf("msie 8") > -1) {
window.external.AddToFavoritesBar(url, title); //IE8
}
else if (document.all) {
try{
window.external.addFavorite(url, title);
}catch(e){
alert('对不起，由于您的浏览器功能限制,请使用菜单栏或按 Ctrl+D 手动收藏!');
}
}
else if (window.sidebar) {
window.sidebar.addPanel(title, url, "");
}
else {
alert('对不起，由于您的浏览器功能限制,请使用菜单栏或按 Ctrl+D 手动收藏!');
}
}Run code
Cut to clipboard
//创建信息窗口
var infoWindow1 = new BMap.InfoWindow("广西华都环境投资集团有限公司<p style='word-break:keep-all;white-space:nowrap;'>地址：南宁市青秀区东葛路118号南宁青秀万达广场东9栋2701室</p><p>电话：<?php echo $wen_tel;?></p>");Run code
Cut to clipboard
一般的文字截断(适用于内联与块)：
.text-overflow{
display:block; /*内联对象需加*/
width:31em;
word-break:keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}Run code
Cut to clipboard
对于表格，定义有点不一样：
table{
width:30em;
table-layout:fixed; /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}Run code
Cut to clipboard
注：这个只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。 这个写法只有IE会有“...”，其它的浏览器文本超出指定宽度时会隐藏。
文章：百度地图显示多个标注点 发表时间：2017-12-05, 14:41:17
#719
作者：广西南宁市
微信小程序swiper高度
WXML
JS
2 , 2 , 2 ,
修复版本高度100%bug上算法计算高度有问题
WXML
<!--index.wxml-->
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-dots="true" style="height:{{imgheightsheight}}px;">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="100%" bindload="imageLoad" style="width:100%;height:{{imgheightsheight}}px;" />
</swiper-item>
</block>
</swiper>Run code
Cut to clipboard
JS
Page({
data: {
imgUrls: [
'http://newtest.test2.resonance.net.cn/xcximg/01.jpg',
'http://newtest.test2.resonance.net.cn/xcximg/01.jpg',
'http://newtest.test2.resonance.net.cn/xcximg/01.jpg'
],
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000
},
changeIndicatorDots: function (e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay: function (e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange: function (e) {
this.setData({
interval: e.detail.value
})
},
durationChange: function (e) {
this.setData({
duration: e.detail.value
})
},
imageLoad: function (e) {
//获取图片真实宽度
//var imgwidth = e.detail.width,
//imgheight = e.detail.height,
//宽高比
//ratio = imgwidth / imgheight;
//console.log(imgwidth, imgheight)
var imageSize = {};
var originalWidth = e.detail.width;//图片原始宽
var originalHeight = e.detail.height;//图片原始高
var originalScale = originalHeight / originalWidth;//图片高宽比
var that=this
//获取屏幕宽高
wx.getSystemInfo({
success: function (res) {
var windowWidth = res.windowWidth;
var windowHeight = res.windowHeight;
var windowscale = windowHeight / windowWidth;//屏幕高宽比
//console.log('windowWidth: ' + windowWidth)
//console.log('windowHeight: ' + windowHeight)
if (originalScale < windowscale) {//图片高宽比小于屏幕高宽比
//图片缩放后的宽为屏幕宽
imageSize.imageWidth = windowWidth;
imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth;
} else {//图片高宽比大于屏幕高宽比
//图片缩放后的高为屏幕高
imageSize.imageHeight = windowHeight;
imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight;
}
that.setData({
imgheightsheight: windowHeight,
})
}
})
//console.log(imageSize);
//计算的高度值
//var viewHeight = 750 / ratio;
// var imgheight = viewHeight
///var imgheights = this.data.imgheights
//把每一张图片的高度记录到数组里
/*imgheights.push(imgheight)
this.setData({
imgheights: imgheights,
})*/
},
})
Run code
Cut to clipboard
data: {
//图片
hdimg: [],
//是否采用衔接滑动
circular: true,
//是否显示画板指示点
indicatorDots: false,
//选中点的颜色
indicatorcolor: "#000",
//是否竖直
vertical: false,
//是否自动切换
autoplay: false,
//滑动动画时长毫秒
duration: 100,
//所有图片的高度
imgheights: [],
//图片宽度
imgwidth: 750,
//默认
current:0
},Run code
Cut to clipboard
imageLoad: function (e) {
//获取图片真实宽度
var imgwidth = e.detail.width,
imgheight = e.detail.height,
//宽高比
ratio = imgwidth / imgheight;
console.log(imgwidth, imgheight)
//计算的高度值
var viewHeight = 750 / ratio;
var imgheight = viewHeight
var imgheights = this.data.imgheights
//把每一张图片的高度记录到数组里
imgheights.push(imgheight)
this.setData({
imgheights: imgheights,
})
},
bindchange: function (e) {
console.log(e.detail.current)
this.setData({ current: e.detail.current})
}Run code
Cut to clipboard
<view>
<swiper class="swiper" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" bindchange="bindchange" circular="{{circular}}" style="height:{{imgheights[current]}}rpx;">
<block wx:for="{{hdimg}}" wx:key="{{index}}">
<swiper-item >
<image src="{{item}}" mode="aspectFit" bindload="imageLoad"
class=".itemimage" style="height:{{imgheights[current]}}rpx;width:{{imgwidth}}rpx;"/>
</swiper-item>
</block>
</swiper>
</view>Run code
Cut to clipboard
.swiper {
width: 100%;
}Run code
Cut to clipboard
修复版本高度100%bug上算法计算高度有问题
Page({
data: {
imgUrls: [
'http://newtest.test2.resonance.net.cn/xcximg/02.jpg?1',
'http://newtest.test2.resonance.net.cn/xcximg/03.jpg?1',
'http://newtest.test2.resonance.net.cn/xcximg/04.jpg?1'
],
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000
},
changeIndicatorDots: function (e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay: function (e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange: function (e) {
this.setData({
interval: e.detail.value
})
},
durationChange: function (e) {
this.setData({
duration: e.detail.value
})
},
imageLoad: function (e) {
//获取图片真实宽度
//var imgwidth = e.detail.width,
//imgheight = e.detail.height,
//宽高比
//ratio = imgwidth / imgheight;
//console.log(imgwidth, imgheight)
var imageSize = {};
var originalWidth = e.detail.width;//图片原始宽
var originalHeight = e.detail.height;//图片原始高
var originalScale = originalHeight / originalWidth;//图片高宽比
var that=this
//获取屏幕宽高
wx.getSystemInfo({
success: function (res) {
var windowWidth = res.windowWidth;
var windowHeight = res.windowHeight;
//var windowscale = windowHeight / windowWidth;//屏幕高宽比
//console.log('windowWidth: ' + windowWidth)
//console.log('windowHeight: ' + windowHeight)
/*if (originalScale < windowscale) {//图片高宽比小于屏幕高宽比
//图片缩放后的宽为屏幕宽
imageSize.imageWidth = windowWidth;
imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth;
} else {//图片高宽比大于屏幕高宽比
//图片缩放后的高为屏幕高
imageSize.imageHeight = windowHeight;
imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight;
}*/
var imgheightsheight = originalScale * windowWidth;//(windowHeight * originalWidth) / windowWidth
//console.log(imgheightsheight);
that.setData({
imgheightsheight: imgheightsheight,
})
}
})
//console.log(imageSize);
//计算的高度值
//var viewHeight = 750 / ratio;
// var imgheight = viewHeight
///var imgheights = this.data.imgheights
//把每一张图片的高度记录到数组里
/*imgheights.push(imgheight)
this.setData({
imgheights: imgheights,
})*/
},
})
Run code
Cut to clipboard
文章：微信小程序开发笔记 发表时间：2017-12-11, 11:07:01
#720
作者：广西南宁市
楼主：老板，我有个超牛逼的想法，我们造的这辆车，不装轮子
老板：牛逼，那这辆车怎么前进？磁悬浮？
楼主：不是
老板：气垫？
楼主：不是
老板：吊索？
楼主：不是
老板：反重力？
楼主：都不是，就是一辆普通汽车，不装轮子
老板：xx，我有个超牛逼的想法，我们造的这辆车，不装轮子
员工：是么，那这辆车怎么前进？磁悬浮？
老板：不是
员工：气垫？
老板：不是
员工：吊索？
老板：不是
员工：反重力？
老板：都不是，就是一辆普通汽车，不装轮子
员工: 。。。。。。。。。。。。。
老板：牛逼，那这辆车怎么前进？磁悬浮？
楼主：不是
老板：气垫？
楼主：不是
老板：吊索？
楼主：不是
老板：反重力？
楼主：都不是，就是一辆普通汽车，不装轮子
老板：xx，我有个超牛逼的想法，我们造的这辆车，不装轮子
员工：是么，那这辆车怎么前进？磁悬浮？
老板：不是
员工：气垫？
老板：不是
员工：吊索？
老板：不是
员工：反重力？
老板：都不是，就是一辆普通汽车，不装轮子
员工: 。。。。。。。。。。。。。
文章：王健林的滑铁卢 发表时间：2017-12-14, 17:27:31
#721
作者：广西南宁市
只是副手套，风光过不错了。能及时认清自己，在那个位置收手，实属不易。内心肯定是痛苦的。
文章：王健林的滑铁卢 发表时间：2017-12-14, 17:07:40
#722
作者：广西南宁市
零售存在了上千年，软件也才几十年。只要不出大问题，沃尔玛肯定比微软长寿。盖茨400亿成了首富，沃尔顿五个孩子每个200亿，如果老人不分家，足足有1000亿，两个盖茨也算不上首富
文章：雷军的本命年：轮回中的挫败、幸运和逆袭 发表时间：2017-12-14, 16:28:13
<style>body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100vh; margin: 0; background-color: #111; } .scroll-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 2em; width: 1.2em; font-size: 22px; color: rgba(255, 255, 255, 0.5); border-radius: 2em; border: solid 2px; -webkit-transition: .4s; transition: .4s; } .scroll-icon:hover { background-color: rgba(255, 255, 255, 0.05); color: #fff; } .scroll-icon::after { content: ''; width: 5px; height: 5px; background-color: #fff; border-radius: 50%; -webkit-animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1); animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1); } @-webkit-keyframes scroll-icon { 0% { -webkit-transform: translateY(-12px); transform: translateY(-12px); opacity: 0; } 30%, 70% { opacity: 1; } 100% { -webkit-transform: translateY(12px); transform: translateY(12px); opacity: 0; } } @keyframes scroll-icon { 0% { -webkit-transform: translateY(-12px); transform: translateY(-12px); opacity: 0; } 30%, 70% { opacity: 1; } 100% { -webkit-transform: translateY(12px); transform: translateY(12px); opacity: 0; } } </style><a href="#" class="scroll-icon"></a>mousewheel滚轮事件 鼠标滚轮事件 滚动 监听鼠标滚轮滚动事件 绑定鼠标滚轮
原生的滚轮事件：火狐与其他浏览器使用了不同的事件
/* * 滚轮事件只有firefox比较特殊，使用DOMMouseScroll; 其他浏览器使用mousewheel; * */ // firefox document.body.addEventListener("DOMMouseScroll", function(event) { var direction= event.detail && (event.detail > 0 ? "mousedown" : "mouseup"); console.log(direction); }); // chrome and ie document.body.onmousewheel = function (event) { event = event || window.event; var direction = event.wheelDelta && (event.wheelDelta > 0 ? "mouseup" : "mousedown"); console.log(direction); };使用jquery兼容后的事件
// jquery 兼容的滚轮事件 $(document).on("mousewheel DOMMouseScroll", function (e) { var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox if (delta > 0) { // 向上滚 console.log("wheelup"); } else if (delta < 0) { // 向下滚 console.log("wheeldown"); } });