概述 这是我开发微信小程序遇到的坑中的一个,专门记录下来,供以后开发时参考,相信对其他人也有用. scroll滑到指定位置,有两种解决方案,一种是用scroll-view标签,另一种是用wx.pageScrollTo这个api. 用scroll-view标签 这个标签适合于屏幕内的小范围滚动和锚点滚动,分别通过scroll-top和scroll-into-view这两个标签属性来实现.注意这是标签内属性,所以需要动态改变的话,就需要用this.setData动态设置scroll-top和scro…

尺寸单位与设计原则 首先,我们现在页面中引入一张图片    但是实际上,这个图片的大小是32*18的,之所以会显示这么大,是因为image组件默认的宽度为300px,默认的高度为225px,如果我们需要图片显示真实的大小,就需要添加相关样式进行设置. .image-show{ width:32px; height:28px; } 此时,虽然进行了大小设置,但是,图片依旧是偏大的,之所以会出现这种情况,是因为我们使用了px为单位.但是在小程序中,除了px这种单位外,还有一种rpx,小程序假定的是屏…

微信小程序view组件官方文档 传送门 Learn 一.hover-class属性 二.hover-start-time与hover-stay-time属性 三.hover-stop-propagation属性 一.hover-class属性 hover-class:指定按下去的样式类.当 hover-class="none" 时,没有点击态效果[默认值none] 定义.a的class颜色为红色,定义.d的class为绿色,当鼠标点击时红色区域变成绿色区域,当鼠标离开时,绿色区域又变回…

刚刚接触小程序,小程序与HTML5有一定的差别,小程序就几个标签,而HTML5一大堆标签,还不断更新,但是新增标签功能强大.做一下微信小程序的布局练练手.感觉还是挺不错的,也封装了很多东西功能出来,与mui有类似. 做这个简单的布局,以大海为主题,蓝色调为主色,浅灰为辅.…

1.小程序的布局就多了一个flex布局,其他和之前html没太大区别 ,先看代码: (1)wxml <view class='container'> <view class='selection'> <swiper indicator-dots=" vertical="{{false}}" class='swiper'> <block wx:for="{{imgUrls}}"> <swiper-item…

JS // pages/classify/swiper.js Page({ /** * 页面的初始数据 */ data: { current:0   }, titleBtn:function(e){ var acIndex = e.currentTarget.dataset.current; this.setData({ current: acIndex }) }, swiperBtn:function(e){ var acIndex = e.detail.current; this.setDa…

flex-direction 传送门 border 传送门 边框 粗细:thin(细线).medium(中粗线)和thick(粗线) 类型:九个确定值:none(无边框线). dotted(由点组成的虚线). dashed(由短线组成的虚线). solid(实线). double(双线,双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度). groove(3D沟槽状的边框). ridge(3D脊状的边框). inset(3D内嵌边框,颜色较深). outset(3D外嵌…

wx.getSystemInfo({success: function (res) {thisWidth = res.windowWidth;}}); that.setData({view_Width: thisWidth / ColIndex})//设置列宽 console.log('----------------------'); console.log('列数' + ColIndex + ' ; ' + '屏幕宽度:' + thisWidth + ':单元格宽度:' + thisWidt…

  //滚动触底事件 <scroll-view scroll-y lower-threshold="0" bindscrolltolower="scrollBottom" style="height: 200rpx;"> </scroll-view>…

界面的布局 在微信小程序开发过程中,界面的布局是十分重要的,无论是一个什么样的程序,界面的美观合理才能提供给客户一个较好的使用体验,就微信小程序布局自己看了许多小程序布局,自己将学习心得记录如下: 下面的图片是根据教学视频自己的一些学习进程. 以下是微信小程序界面的头部尾部布局相关代码: <include src="../templates/header" /> Qi <button type="default" size="{{defa…