xiaoshan0711的专栏

原创 微信小程序选择地区，时间

1、index.wxml  当前城市选择：{{picker1Range[picker1Value]}}  当前时间选择:{{timeValue}}  当前日期选择：{{dateValue}}2、index.jsPage({  data:{    picker1Value:0,    picker1Range:['北京','广州','潮州','

转载 在小程序中将多个view居中显示

我们在这里要实现的效果是这样的，在小程序中将多个view居中显示 先看一下效果图如下图效果所示：我们需要将 “延长收货”，”查看物流”，“提醒发货”，“提醒发货”是四个按钮放在页面最中间，并且间隔适当的距离：HTML代码： view class="footer"> view class="footer-btn" st

转载 小程序调用接口实例

在这里通过一个简单的实例来说明微信小程序接口调用： 首先看一下效果：  这个就是小程序的真实样貌，体验度和原生APP还是有点相似的。JSON数据配置：{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleTe

转载 小程序轮播

其实官网已经有了相关说明，但是这个也是通过一个实例来说明一下，小程序的轮播效果： 先看一下效果图： JS代码：var app = getApp();Page({ data: { imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726

转载 小程序的事件

小程序的事件主要有三种类型：1-单击事件2-双击事件3-长按事件单击事件由touchstart、touchend组成,touchend后触发tap事件。（1）单击事件view代码view> button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend"

转载 小程序实现局部元素隐藏

原理：这里主要通过在设置标志来让局部进行隐藏或者切换。下面的代码主要是功能是：单击first第一个view隐藏，第二个展示。单击second第二个view隐藏，第一个展示。JS代码Page({ data:{ flag:0 }, clickMes1: function(){ falg=1 } ， clickMes2: function

转载 小程序实现五星点评

先看一下效果图：如上图所示，这里我们要添加三个五星点评。我们这里之讲解一下，“描述相符”的点评WXML代码 view class="comment1-description" style="display:flex;flex-direction:row;"> view class="comment1-description1">描述相符view

转载 制作微信小程序组件

对于我们日常中一些公共的东西可以封装成组件，然后在各个页面使用。对于小程序，我们也可以封装我们需要的一些公共的东西。这里我们讲解一个小插件。如上图所示，一个小插件，单击是展开，在单击关闭的时候，按钮关闭。页面的WXML （APP.wxml）template name="widget-dialog-iconList"> view class="co

转载 小程序制作回到顶部按钮

我们先看一下效果吧，直接上图。第一种情况,当页面在顶部的时候，回到顶部按钮是不会出现的。第二种情况,当页面在离开顶部一定距离的时候，回到顶部按钮出现接下就是对代码的分析了： 在这里我们如果要使用滚动事件的话，小程序规定 最外层一定要使用scroll-view标签进行包裹，然后在设置scroll-y=”true” 意思是允许页面了纵向滚动，scroll-top

转载 小程序制作五星点评（默认五星）

在小程序的开发过程中，我们会遇到一种情况，就是在制作五星点评的时候，默认五颗星星都是要亮的。这里我们就要分享一下自己做默认五星的心得。在这里我们先看一下效果图：我们在订单页面的时候，当点击“晒单”按钮的时候我们跳转到评价的页面。（图一：订单列表）（图二：评价）在这里我们只看一下“描述相符的五星”WXML代码：

转载 HTML5响应式导航

HTML5响应式导航                    *,            *:after,            *:before {                margin:0;                padding:0;                box-sizing:border-box;                -webk

转载 超有用的分页

分页$(document).ready(function(){        //how much items per page to show    var show_per_page = 5;     //getting the amount of elements inside content div    var number_of_items = $('#

转载 js快速分享代码

这是一款简单易用的文章分享工具，您只需将下面的html代码拷贝到模板中就可以实现文章快速分享功能。如果您想分享你的博客、个人网站或者企业网站等等，下面是两款不错的分享工具，值得拥有！1.div id="ckepop" class='feixiangjias'>        a href="javascript:" class="jiathis jiathis_txt jtico 

转载 手机移动端左右滚动特效

jQuery手机移动端图片触屏滑动焦点图网页特效$(document).ready(function(){$(".main_visual").hover(function(){$("#btn_prev,#btn_next").fadeIn()},function(){$("#btn_prev,#btn_next").fadeOut()});

转载 CSS自适应网页制作教程

自适应网页即是响应式网页，所谓的响应式网页就是，同样的一个网址，在电脑，平板，手机浏览的时候，样式更着改变，这就是简单的一个解释，更合理的解释就是，网页根据屏幕的大小会变得自适应，就会让网站看起来很自然。同样可以根据屏幕分辨率展示或者移除某些元素块。使在窄屏中简化网页，在宽屏中充盈网页，使其看起来更加美观。之前我的网站都是基于我自己的电脑屏幕分辨率1366×768设计而来，所以对于

转载 jQuery实现当拉动滚动条到底部加载数据

jQuery实现当拉动滚动条到底部加载数据*{margin:0;pa动态加载数据ing:0;}body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;}a{color:#444;text-decoration: none;}a:hover{color:#065BC2;text-decorat

原创 静态页面放入ftp后页面兼容性问题——已解决

原创 splice()和split()

splice()的三种用法：删除、插入、替换1.删除var arr1=["a","b","c"]; //想要删除“b”var put1=arr1.splice(1,1);console.log(arr1);  //输出结果：["a","c"]2.插入var arr2=["a","b","c"]; //想要从“a”后面插入“aa”和从“b”后面插入“bb”，从“c”后面插入“

转载 时间的获取

Js获取当前日期时间及其它操作var myDate = new Date();myDate.getYear();        //获取当前年份(2位)myDate.getFullYear();    //获取完整的年份(4位,1970-????)myDate.getMonth();       //获取当前月份(0-11,0代表1月)myDate.getDate();

原创 CSS实现垂直居中

无标题文档*{margin:0; padding:0;}/*说明：高度是margin-top负值的一半，适用于所有的浏览器*/#div{width:80%; height:80px; margin-top:-40px; background:#7f7f7f; position:absolute; top:50%; left:10%;}

原创 日期和数组

日期和数组

原创 javascript实现的简单计算器

javascript实现的简单计算器