写一些在编辑过程中的问题
1.上传图片
直接放在项目里是无效的
image.png
打开项目所在文件放进去才可以
image.png
2.toggle效果
image.png
wm是不支持dom操作的，我们可以通过改变绑定的class类名来完成
wxml
<view class='bookBlock-item-header-con {{isOpenClass}}'>
<text class='tittle'>闲置图书（共12本）</text>
<text class='info'>.《蓝色的海洋幻想》</text>
<text class='info'>.《蓝色的海洋幻想》</text>
<text class='info'>.《蓝色的海洋幻想》</text>
<text class='info'>.《蓝色的海洋幻想》</text>
<text class='openAll' bindtap='bookBlock_open'>{{isOpenText}}</text>
</view>
js
bookBlock_open:function(){
var vals = this.data.isOpen;
if (vals){
//将做收起状态
this.setData({ isOpenText: '展开'});
this.setData({ isOpenClass: 'close' });
this.setData({ isOpen: false });
}else{
//将做收起状态
this.setData({ isOpenText: '收起' });
this.setData({ isOpenClass: 'open' });
this.setData({ isOpen: true });
}
}
wxss
.bookBlock-item-header-con{
position: relative;
padding:20rpx;
overflow: hidden;
}
.bookBlock-item-header-con.close{
height:220rpx;
}
.bookBlock-item-header-con.open{
height:auto;
}
1.对话框：http://www.jb51.net/article/111586.htm
2.for循环点击事件：
<view class="myNew" wx:for="{{list}}">{{item.title}}<view bindtap="readDetail" data-id="{{item.id}}">{{item.content}}</view></view>
这个data-id也可以是data-XX
js文件：
readArticle:function(e){
var $id = e.currentTarget.dataset.id; //打印可以看到，此处已获取到了对应的id
})
3.引用公共js的方法
utils.js:
var common = {
"a": function(){
return 'ok!';
}
}
module.exports = common;
在index.js里面用：
onLoad: function (option) {
console.log(common.a());//ok!
)}
http://blog.csdn.net/zuoliangzhu/article/details/53862576-----目前为止最全的微信小程序项目实例
4.请求后台数据方法
data: {
motto: 'Hello World',
roomList:[],
},
loadroomList:function(){
var that = this;
wx.request({
url: 'https://you-server/test.json',
method:'GET',
success:function(res){
that.setData({
roomList:res.data
});
}
})
})
}，
onRead:function(){
this. loadroomList();
}
在wxml中
<view class='yardCon-item' wx:for="{{roomList}}" wx:for-item="item">
<image src='{{item.view_img}}'></image>
<text>{{item.projectname}}</text>
</view>
在onread中写ajax获取方法
5.获取用户信息，比如头像啊这些
js
const app = getApp()
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse) {
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function (e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
},
html:
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
6.微信轮播
so easey！用它的自身组件
html
<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
<block wx:for="{{bannerArr}}" wx:for-index="index">
<swiper-item>
<image src="{{item.url}}" class="slide-image" mode="aspectFill"/>
</swiper-item>
</block>
</swiper>
css
.swiper {
height: 400rpx;
width: 100%;
}
.swiper image {
height: 100%;
width: 100%;
}
7.表单提交
image.png
这里有普通input，复选框，时间选框
<form bindsubmit='filterForm'>
<!-- 日期 -->
<view class='timeComing'>
<text>入住时间</text>
<picker mode="date" value="{{date}}" start="2016-09-26" end="2017-10-10" bindchange="listenerTimePickerSelected_start">
<input name="filter_datestart" placeholder="入住时间" value="{{filter_datestart == ''?'':filter_datestart}}"></input>
</picker>-
<picker mode="date" value="{{date}}" start="2016-09-26" end="2017-10-10" bindchange="listenerTimePickerSelected_end">
<input name="filter_dateend" placeholder="离开时间" value="{{filter_dateend == ''?'':filter_dateend}}"></input>
</picker>
</view>
<!-- 小院 -->
<view class='chooseYard'>
<text>所属小院</text>
<checkbox-group name='yardname'>
<label class='yradname'>
<checkbox value='1'></checkbox>
山楂小院
</label>
<label class='yradname'>
<checkbox value='2'></checkbox>
麻麻花
</label>
<label class='yradname'>
<checkbox value='3'></checkbox>
先生的院子
</label>
<label class='yradname'>
<checkbox value='4'></checkbox>
桃叶谷
</label>
</checkbox-group>
</view>
<!-- 价格 -->
<view class='priceRange'>
<text>价格范围</text>
<input name='minprice' type='number'></input>-
<input name='maxprice' type='number'></input>
</view>
<view class='save'>
<button class='reset' form-type='submit'>重置</button>
<button class='submit' form-type='submit'>确认</button>
</view>
</form>
js
filterForm:function(e){
console.log(e);
}
点击提交
image.png
数据就全在里面啦
复选框的写法：
<checkbox-group name='yardname'>
<label class='yradname'>
<checkbox value='3'></checkbox>
先生的院子
</label>
<label class='yradname'>
<checkbox value='4'></checkbox>
桃叶谷
</label>
</checkbox-group>
lable的作用是点击lable就能触发checkbox选中
checkbox的样式，它没改之前不是这样的是一个框内打绿勾的样子
//改变框的样式
.chooseYard .yradname>checkbox .wx-checkbox-input{
width: 20rpx; /* 背景的宽 */
height: 20rpx; /* 背景的高 */
}
//改变选中框的样式
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
background: #5eb2ae;
}
//改变选中框中对勾的样式
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
display: none;
}
还有button的样式，也不是简单button{}就可以改变的，尤其是它自定义的边框
button::after{
border:1px solid transparent;
}
网友评论