0-demo
demo.wxml
<!--pages/demo/demo.wxml-->
<text>{{10+20}}</text>
<view>{{10>20 ? 'aaaa':'bbbb'}}</view>
<view>{{myName}}</view>
<view id="my-{{ids[0]}}">aaaaaa</view>
<view id="my-{{ids[1]}}">bbbbbb</view>
<view id="my-{{ids[2]}}">cccccc</view>
<view wx:for="{{list}}" wx:key="index">
{{item}}-----{{index}}
</view>
<view wx:for="{{list}}" wx:for-item="myItem" wx:for-index="myIndex" wx:key="myIndex">
{{myItem}}-----{{myIndex}}
</view>
<view wx:if="{{isCreated}}">我是动态创建和删除1111111</view>
<view wx:else>我是动态创建和删除22222222</view>
<view hidden="{{isHidden}}">我是动态隐藏和显示</view>
<button type="primary" bindtap="handleTap">click1</button>
<button type="primary" catchtap="handleTap">click2</button>
demo.js
Page({
/**
* 页面的初始数据
*/
data: {
myName:"张三",
ids:["AAA","BBB","CCC"],
list:["唱","跳","Rap","打篮球"],
isCreated:false,
isHidden:false
},
handleTap(){
this.setData({
myName:"李四",
isCreated:!this.data.isCreated,
isHidden:!this.data.isHidden
})
}
......其他
})
1-todolist
todolist.wxml
<view class="box">
<input type="text" bindinput="handleInput" value="{{mytext}}"/>
<button size="mini" bindtap="handleAdd">添加</button>
</view>
<view wx:if="{{datalist.length>0}}">
<view wx:for="{{datalist}}" wx:key="index" class="list">
<text>{{item}}</text>
<button size="mini" bindtap="handleDelete" data-myid="{{index}}">删除</button>
</view>
</view>
<view wx:else>暂无待办事项</view>
todolist.wxss
input{
border: 1px solid black;
height: 50px;
line-height: 50px;
border-radius: 10px;
}
.box{
display: flex;
flex-direction: row;
}
.list{
display: flex;
flex-direction: row;
justify-items: between;
}
.list text{
width: 200px;
}
todolist.js
// pages/1-todolist/1-todolist.js
Page({
/**
* 页面的初始数据
*/
data: {
mytext:"",
datalist:["111","222","333"]
},
handleInput(event){
// console.log(event.detail.value)
this.setData({
mytext:event.detail.value
})
},
handleAdd(){
this.setData({
datalist:[...this.data.datalist,this.data.mytext],
mytext:""
})
},
handleDelete(event){
// console.log(event.target.dataset.myid)
// console.log(this.data.datalist.splice(event.target.dataset.myid,1))
this.data.datalist.splice(event.target.dataset.myid,1)
this.setData({
datalist:this.data.datalist
})
}
})
2-highlight
highlight.wxml
<view class="box">
<view wx:for="{{datalist}}" wx:key="index"
bindtap="handleTap" data-myid="{{index}}"
class="item {{current === index?'active':''}}"
>
<text>{{item}}</text>
</view>
</view>
highlight.wxss
.box{
display: flex;
flex-direction: row;
}
.box .item{
flex:1;
text-align: center;
}
.active{
color:red;
}
highlight.js
Page({
/**
* 页面的初始数据
*/
data: {
datalist:["衣服","裤子","电子"],
current:0
},
handleTap(event){
// console.log(event.target.dataset.myid)
this.setData({
current:event.currentTarget.dataset.myid
})
}
})
3-rpx
rpx.wxml
<view class="box"></view>
rpx.wxss
.box{
width: 750rpx;
height: 400rpx;
background-color: yellow;
}
4-wxs
wxs.wxml
<wxs src="./date.wxs" module="handleDate"/>
<wxs src="./goodFilter.wxs" module="goodFilter"/>
<text>{{handleDate(startTime)}}</text>
<view>
<input bindinput="handleInput"/>
{{mytext}}
<view wx:for="{{goodFilter(goodsList,mytext)}}" wx:key="index">
{{item}}
</view>
</view>
wxs.wxss
input {
border:2px solid black;
}
date.wxs
function handleDate(time){
var odate = getDate(time)
// console.log(odate)
return odate.getFullYear() + "-" + (odate.getMonth()+1) + "-" + odate.getDate()
}
module.exports = handleDate
goodFilter.wxs
function goodFilter(goodsList,mytext){
return goodsList.filter(function(good) {
return good.indexOf(mytext)>-1
})
}
module.exports = goodFilter
wxs.js
Page({
/**
* 页面的初始数据
*/
data: {
mytext:"",
startTime: 1624676059976,
goodsList:["aaa","abc","ddd","acc","bcc","abd","bcd","acd"]
},
handleInput(event){
this.setData({
mytext:event.detail.value
})
}
})
5-request
request.wxml
<button type="primary" bindtap="handleAjax">ajax</button>
<view wx:for="{{datalist}}" wx:key="index" class="item">
<image src="{{item.img}}" mode="widthFix"/>
<view>{{item.nm}}</view>
</view>
request.wxss
.item{
overflow: hidden;
padding:10rpx;
}
.item image{
width: 200rpx;
float: left;
}
request.js
Page({
/**
* 页面的初始数据
*/
data: {
datalist:[]
},
handleAjax(){
wx.request({
url:'https://i.maoyan.com/api/mmdb/movie/v3/list/hot.json?ct=%E7%99%BD%E9%93%B6&ci=363&channelId=4',
method:"get",
data:{
},
success:(res)=>{
// console.log(res.data.data.hot)
this.setData({
datalist:res.data.data.hot
})
},
fail:()=>{
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onl oad(options) {
this.handleAjax()
}
})
6-image
image.wxml
<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" mode="widthFix"></image>
image.wxss
image{
width: 300px;
height: 200px;
}
7-swiper
swiper.wxml
<!--pages/7-swiper/7-swiper.wxml-->
<button bindtap="handleAjax" type="primary">ajax-swiper</button>
<swiper indicator-dots="{{true}}" circular="{{true}}" autoplay="{{true}}" interval="{{3000}}">
<swiper-item wx:for="{{datalist}}" wx:key="index">
<image src="{{item.image_url}}" mode="widthFix" style="width: 100%;"/>
</swiper-item>
</swiper>
swiper.wxss
swiper{
height: 314rpx;
}
swiper.js
// pages/7-swiper/7-swiper.js
Page({
/**
* 页面的初始数据
*/
data: {
datalist:[]
},
handleAjax(){
wx.request({
url: 'https://api.juooo.com/home/index/getClassifyHome?city_id=0&abbreviation=&version=6.1.40&referer=2',
success:(res)=>{
// console.log(res.data.data.slide_list)
this.setData({
datalist:res.data.data.slide_list
})
}
})
}
})
8-scrollview
scrollview.wxml
<!--pages/8-scrollview/8-scrollview.wxml-->
<!-- <view style="height: 200px;background-color: yellow;">
轮播
</view> -->
<view>水平方向</view>
<scroll-view class="box_horizontal" scroll-x="{{true}}" enable-flex="{{true}}"
bindscrolltolower="handleRight">
<view class="item_horizontal">aaaaaa</view>
<view class="item_horizontal">bbbbbb</view>
<view class="item_horizontal">cccccc</view>
<view class="item_horizontal">dddddd</view>
</scroll-view>
<view>垂直方向</view>
<scroll-view class="box" scroll-y="{{true}}"
bindscrolltolower="handlescrolltolower" refresher-enabled="{{true}}"
bindrefresherrefresh="handleRefresh" refresher-triggered="{{isRefresh}}">
<view>111111111111111</view>
<view>222222222222222</view>
<view>333333333333333</view>
</scroll-view>
scrollview.wxss
/* pages/8-scrollview/8-scrollview.wxss */
.box{
height: 300px;
}
.item{
height: 300px;
}
.box_horizontal{
height: 300px;
display: flex;
flex-direction: row;
width: 100vw;
}
.item_horizontal{
width: 200px;
flex-shrink: 0;
}
scrollview.js
// pages/8-scrollview/8-scrollview.js
Page({
/**
* 页面的初始数据
*/
data: {
isRefresh:true
},
handlescrolltolower(){
console.log("到底了")
},
handleRefresh(){
console.log("下拉了")
setTimeout(()=>{
this.setData({
isRefresh:false
})
},2000)
},
handleRight(){
console.log("到右边了")
}
})
9-othercomponent
othercomponent.wxml
<!--pages/9-othercomponent/9-othercomponent.wxml-->
<wxs src="./sum.wxs" module="sum"/>
<icon class="icon-box-img" type="warn" size="93"></icon>
<view wx:for="{{checkList}}" wx:key="index" style="display: flex;justify-content: space-around;padding: 10px;">
<checkbox checked="{{item.isChecked}}" bindtap="handeTap" data-index="{{index}}"/>
<view>
<view>{{item.name}}</view>
<view>价格:￥{{item.price}}</view>
</view>
<view>{{item.number}}</view>
</view>
<view>
金额计算：{{sum(checkList)}}
</view>
sum.wxs
function sum(checkList) {
var total = 0
for (var index = 0; index < checkList.length; index++) {
if(checkList[index].isChecked){
total += checkList[index].number * checkList[index].price
}
}
return total
}
module.exports = sum
othercomponent.js
// pages/9-othercomponent/9-othercomponent.js
Page({
/**
* 页面的初始数据
*/
data: {
checkList:[
{
id:1,
name:"aaa",
price:100,
number:1,
isChecked:false
},
{
id:2,
name:"bbb",
price:200,
number:2,
isChecked:false
},
{
id:3,
name:"ccc",
price:300,
number:3,
isChecked:false
}
]
},
handeTap(event){
var index = event.target.dataset.index
// console.log(index)
this.data.checkList[index].isChecked = !this.data.checkList[index].isChecked
// console.log(this.data.checkList)
this.setData({
checkList:[...this.data.checkList]
})
}
})
10-selfComponent
selfComponent.wxml
<!--pages/10-selfComponent/10-selfComponent.wxml-->
<view>自定义组件</view>
<navbar></navbar>
<!-- 父传子 -->
<!-- <navbar list="{{['aaa','bbb']}}"></navbar> -->
navbar.wxml
<!--components/navbar/navbar.wxml-->
<view class="box">
<view wx:for="{{list}}" wx:key="index" class="item {{current===index?'active':''}}"
bindtap="handleClick" data-index="{{index}}">
{{item}}
</view>
</view>
navbar.wxss
/* components/navbar/navbar.wxss */
.box{
display: flex;
flex-direction: row;
}
.item{
flex:1;
height: 50px;
line-height: 50px;
text-align: center;
}
.active{
color:red;
}
navbar.js
// components/navbar/navbar.js
Component({
/**
* 组件的属性列表
*/
properties: {
list:{
type:Array,
value:["正在热映","即将上映"],
},
current:{
type:Number,
value:0
}
},
/**
* 组件的初始数据
*/
data: {
// datalist:["正在热映","即将上映"],
// current:0
},
/**
* 组件的方法列表
*/
methods: {
handleClick(event){
// this.setData({
// current:event.target.dataset.index
// })
this.triggerEvent("ParentEvent",event.target.dataset.index)
}
}
})
11-slot
slot.wxml
<!--pages/11-slot/11-slot.wxml-->
<top-header>
<button slot="left" bindtap="handleTap">返回</button>
<button slot="right">首页</button>
</top-header>
<footer wx:if="{{isShow}}"></footer>
slot.js
// pages/11-slot/11-slot.js
Page({
/**
* 页面的初始数据
*/
data: {
isShow:false
},
handleTap(event){
// console.log(event)
this.setData({
isShow:!this.data.isShow
})
}
})
slot.json
{
"usingComponents": {
"top-header":"../../components/topheader/TopHeader",
"footer":"../../components/footer/Footer"
}
}
TopHeader.wxml
<!--components/topheader/TopHeader.wxml--> <view class="box"> <slot name="left"></slot> <text>topheader</text> <slot name="right"></slot> </view>
TopHeader.wxss
/* components/topheader/TopHeader.wxss */
.box{
display: flex;
flex-direction: row;
}
TopHeader.js
// components/topheader/TopHeader.js
Component({
// 支持多个插槽
options:{
multipleSlots:true
},
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
Footer.wxml
<!--components/footer/Footer.wxml--> <view class="box"></view>
Footer.wxss
/* components/footer/Footer.wxss */
.box{
width: 100%;
height: 200px;
position: fixed;
bottom: 0;
left:0;
background-color: red;
}
12-lifecycle
lifecycle.wxml
<!--pages/12-lifecycle/12-lifecycle.wxml-->
<view>抢购倒计时</view>
<count wx:if="{{isCreated}}" bindevent="handleEvent"></count>
lifecycle.json
{
"usingComponents": {
"count":"../../components/count/Count"
}
}
lifecycle.js
// pages/12-lifecycle/12-lifecycle.js
Page({
/**
* 页面的初始数据
*/
data: {
isCreated:true
},
handleEvent(){
this.setData({
isCreated:false
})
}
})
Count.wxml
<!--components/count/Count.wxml-->
{{count}}
Count.js
// components/count/Count.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
lifetimes:{
attached:function () {
this.intervalId = setInterval(()=>{
if(this.data.count==0){
this.triggerEvent("event")
return
}
this.setData({
count:this.data.count-1
})
},1000)
},
detached:function () {
clearInterval(this.intervalId)
}
},
/**
* 组件的初始数据
*/
data: {
count:10
},
/**
* 组件的方法列表
*/
methods: {
}
})
标签：flex,wxml,微信,程序,js,item,基础,data,event From： https://www.cnblogs.com/bijian/p/17551790.html