初学网站开发书籍,水果商城网站模板,做百度推广网站得多少钱,昆明企业网站设计WebView app.是全局配置#xff0c;app.json是全局配置文件#xff0c;在页面的.json配置文件中的配置会覆盖我们全局的配置 快捷键#xff1a; .box 敲回车 ----- view classbox/view .row*8 敲回车#xff1a; .row{$}*8 敲回车 案例1… WebView app.是全局配置app.json是全局配置文件在页面的.json配置文件中的配置会覆盖我们全局的配置 快捷键 .box 敲回车 ----- view classbox/view .row*8 敲回车 .row{$}*8 敲回车 案例1 .wxss:
.box{color: red;border:3px solid rgb(196, 240, 196);
}
.wxml: view class box跟我一起学小程序/view 案例2
px和rpx的差异
px单位是固定大小不会随着屏幕的改变而改变rpx是响应式布局 案例3 .wxml: hover-stop-propagation子元素阻止父元素冒泡
view classbox hover-classboxhover hover-start-time0 hover-stay-time200王婆卖瓜 view class inner hover-classinnerhover hover-stop-propagation true老王卖鱼/view
/view
view11111/view
view22222/view
text user-select33333/text
text44444/text
text user-select 55555/text
view-----------/view
text spaceensp 6 6 6 6 6/text
view-----------/view
text spaceemsp 6 6 6 6 6/text
view-----------/view
text spacenbsp 6 6 6 6 6/text
view-----------/view
text decode lt; 77777/textview-----------/view
text lt; 77777/text
viewicon type warn size100 colorpink/iconicon type waiting size50/icon
/view
viewprogress percent 30 show-info border-radius100 stroke-width10/progress
/view .wxss:
.box{width:200px;height:200px;background: red;
}.boxhover{background: palegreen;
}.box .inner{width:80px;height:80px;background: palevioletred;}
.inner.innerhover{background: seashell;
}案例4scroll-view
没有之前 竖向滚动 .wxml:
scroll-view class myScroll scroll-yview classrow1/viewview classrow2/viewview classrow3/viewview classrow4/viewview classrow5/viewview classrow6/viewview classrow7/viewview classrow8/view
/scroll-view !-- scroll-view可滚动scroll-y竖向滚动 -- .wxss:
.myScroll{width: 100%; /*沾满整个屏幕 */height:500rpx;background: #eeeeee;
}.myScroll .row{width: 220rpx;height:220rpx; background: palegreen;margin-bottom: 10rpx; /* 每个容器底部间距10rpx */
} 横向滚动 强制一行然后实现滚动效果 /*1、把子容器排成一行 如果只有inline的话width、height就不起作用了 */ display: inline-block; /*2、强制让子元素挤在一行*/ white-space: nowrap; wxml:
scroll-view class myScroll scroll-xview classrow1/viewview classrow2/viewview classrow3/viewview classrow4/viewview classrow5/viewview classrow6/viewview classrow7/viewview classrow8/view
/scroll-view !-- scroll-view可滚动scroll-y竖向滚动 -- wxss
.myScroll{width: 100%; /*沾满整个屏幕 */height:500rpx;background: #eeeeee;/*2、强制让子元素挤在一行*/white-space: nowrap;
}.myScroll .row{width: 220rpx;height:220rpx; background: palegreen;/*1、把子容器排成一行 如果只有inline的话width、height就不起作用了 */display: inline-block; margin-right: 10rpx; } /* 每个元素都有10间隔 最后一个元素不需要有间隔:*/
.myScroll .row:last-child{margin-right: 0;
}
案例5movable-area自由移动 拖动图形验证功能可以使用这个实现
movable-area、 movable-view必须联合使用 movable-view才是可移动区域 movable-area 必须设置width和height属性不设置默认为10px**当movable-view小于movable-area时movable-view的移动范围是在movable-area内当movable-view大于movable-area时movable-view的移动范围必须包含movable-area movable-view 属性类型默认值必填说明directionstringnone否 movable-view的移动方向 属性值有all、vertical、horizontal、none inertiabooleanfalse否movable-view是否带有惯性out-of-boundsbooleanfalse否超过可移动区域后movable-view是否还可以移动 .wxml:
movable-area stylewidth: 400rpx;height:400rpx;background:#ccc; overflow: hidden;!-- out-of-bounds可以移出、overflow: hidden移出后隐藏移出部分 -- movable-view directionall inertia x20rpx y20rpx out-of-boundsstylewidth: 150rpx;height: 150rpx;background: green;viewhello/view/movable-view
/movable-area 案例6navigator页面链接导航 navigator url /pages/index/index hover-classhoverNav这是跳转到index页面/navigatornavigator url /pages/index/index classout hover-classhoverNavimage src/static/pic2.png modeaspectFit classimage/image
/navigatornavigator url /pages/index/index view这是页面跳转/view
/navigator .out .image{width: 200rpx;height: 200rpx;
}.hoverNav{color: aquamarine;background:rgb(248, 52, 101);
}
相对路径 退出两层 ../../
/代表根目录
案例7app.js
app.js是全局配置文件 用的比较多的是globalData全局变量 看控制台 如何修改全局变量的值呢 案例8data差值表达式: 1、两个花括号 view我的名字是{{myName}}
/view
2、设置一个定时器在页面加载完成2s后修改值
Page({/*** 页面的初始数据我们要在页面中显示的所有数据都是放在data中*/data: {myName:张三三},/*** 生命周期函数--监听页面加载* onLoad函数是页面加载完成后要执行的函数*/onLoad(options) {setTimeout((){this.setData({myName:李想想})},2000)},3、取值
wxml:
view
我的名字是{{myName}}
/view
view
年龄{{age}}
/view
veiw
书籍{{books}}
/veiw
view
用户{{user}}
/view
view
用户{{user.name}}-{{user.age}}-{{user.gender}}
/view
view !--号是连接符--
用户{{user.name - user.age-user.gender}}
/view .js:
Page({/*** 页面的初始数据我们要在页面中显示的所有数据都是放在data中*/data: {myName:张三三,age:18,bool:true,books:[孙子兵法,红楼梦],user:{name:高齐强,age:50,gender:男}},
4、if elif else
true和false必须放在差值表达式中
view wx:if{{true}}用户1{{user.name}}-{{user.age}}-{{user.gender}}
/viewview wx:if{{false}}用户2{{user.name}}-{{user.age}}-{{user.gender}}
/viewview wx:if{{11}}用户3{{user.name}}-{{user.age}}-{{user.gender}}
/viewview wx:if{{bool}}用户4{{user.name}}-{{user.age}}-{{user.gender}}
/viewview wx:if{{!bool}}用户5{{user.name}}-{{user.age}}-{{user.gender}}
/view !--if else两个盒子要放在一起如果你中间加了一些别的字符就会报错--
view wx:else用户6{{user.name}}-{{user.age}}-{{user.gender}}
/viewview wx:if{{age15}}年龄15岁/view
view wx:elif{{age16}}年龄16岁/view
view wx:elif{{age17}}年龄17岁/view
view wx:elif{{age18}}年龄18岁/view
view wx:elif{{age19}}年龄19岁/view
view wx:else年龄无效值/view 案例9:for循环列表渲染
案例1
data: {myName:张三三,age:18,bool:true,books:[孙子兵法,红楼梦,青年文摘,新闻报道],user:{name:高齐强,age:50,gender:男}},
!--wx:for-itemitem可以省略 因为默认每个元素就叫item--
view wx:for{{books}} wx:for-itemitem书名{{item}}
/viewview wx:for{{books}} wx:for-itemrow书名{{row}}
/viewview wx:for{{books}} 书名{{item}}
/view 案例2index索引值
view wx:for{{books}} 书名{{index}} - {{item}}
/view !--wx:for-indexindex可以省略默认就是index--
view wx:for{{books}} wx:for-indexindex书名{{index1}}-{{item}}
/view 案例3循环对象
view class article wx:for{{articles}}image src{{item.picUrl}} modeaspectFit /view class title{{item.title}}/viewtext class time {{item.time}}/text
/view
Page({/*** 页面的初始数据*/data: {articles:[{title:JS时间戳转为时间格式的多功能方法,time:2023-01-10,picUrl:http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20200611/1591843113.jpg},{title:WXS根据时间戳计算时间间隔,time:2020-04-25,picUrl:http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20200425/1587812172.jpg},{title:微信小程序wxs时间戳格式化多功能转换方法,time:2020-03-29,picUrl:http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20200329/1585485379.jpg},{title:移动端rem与px单位转换响应式适配的方法,time:2020-03-26,picUrl:http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20200326/1585201323.jpg}]}, 案例10bindtap事件触发
事件分类事件分为冒泡事件和非冒泡事件
冒泡事件当一个组件上的事件被触发后该事件会向父节点传递。非冒泡事件当一个组件上的事件被触发后该事件不会向父节点传递。
WXML的冒泡事件列表
类型触发条件touchstart手指触摸动作开始touchmove手指触摸后移动touchcancel手指触摸动作被打断如来电提醒弹窗touchend手指触摸动作结束tap手指触摸后马上离开这个用的比较多类似于click点击事件 案例1
.js:
// pages/event/event.js
Page({/*** 页面的初始数据*/data: {myName:咸鱼本鱼,age:18},onClickNow(){console.log(点击了block块);this.setData({myName : 基尼太美,age:66})},
.wxml:
textpages/event/event.wxml/text
view class block bindtaponClickNow点击我改变姓名
/viewview class text姓名{{myName}} 年龄{{age}}
/view
.wxss:
.block{width: 300rpx;height: 100rpx;background-color: aquamarine;font-size:40rpx;
}.text{font-size: 60rpx;
} 案例2带有参数的点击事件
.wxml:
textpages/event/event.wxml/text
view class block data-myname张三 data-myage26 bindtaponClickNow点击我改变姓名
/viewview class text姓名{{myName}} 年龄{{age}}
/view.js:
Page({/*** 页面的初始数据*/data: {myName:咸鱼本鱼,age:18},
/* 这个event其实是个对象*/onClickNow(event){ console.log(点击了block块);console.log(event);console.log(event.currentTarget.dataset.myname);console.log(event.currentTarget.dataset.myage);this.setData({myName : event.currentTarget.dataset.myname,age:event.currentTarget.dataset.myage})}, .wxss: .block{width: 300rpx;height: 100rpx;background-color: aquamarine;font-size:40rpx;
}.text{font-size: 60rpx;
} 案例3
