微信小程序作品集实例：跨页面传参，数据库，换行，空格，css

审美是病，得治。

从左到右依次，初始界面，点一下，进入第二个作者目录，点击李贺，进入第三个作品目录，点击马诗二十三首，进入第四个作品详情，第五个是结构，◀▶切换前后。
依次往下捋，
data里面post-data.js：

var local_database= [{"zuozhe":"李贺","zuopin": [["马诗", "大漠沙如雪，\n燕山月似钩。\n何当金络脑，\n快走踏清秋。"], ["南园", "男儿何不带吴钩，\n收取关山五十州。\n请君暂上凌烟阁，\n若个书生万户侯。"], ["马诗二十三首", "龙脊贴连钱，\n银蹄白踏烟。\n无人织锦韂，\n谁为铸金鞭。\n\n腊月草根甜，\n天街雪似盐。\n未知口硬软，\n先拟蒺藜衔。\n\n忽忆周天子，\n驱车上玉山。\n\n鸣驺辞凤苑，\n赤骥最承恩。\n\n\n此马非凡马，\n房星本是精。\n\n向前敲瘦骨，\n犹自带铜声。\n\n\n大漠沙如雪，\n燕山月似钩。\n\n何当金络脑，\n快走踏清秋。\n\n\n饥卧骨查牙，\n粗毛刺破花。\n\n鬣焦珠色落，\n发断锯长麻。\n\n\n西母酒将阑，\n东王饭已干。\n\n君王若燕去，\n谁为曳车辕？\n\n赤兔无人用，\n当须吕布骑。\n\n吾闻果下马，\n羁策任蛮儿。\n\n\n催榜渡乌江，\n神骓泣向风。\n\n君王今解剑，\n何处逐英雄？\n\n内马赐宫人，\n银鞯刺麒麟。\n\n午时盐坂上，\n蹭蹬溘风尘。\n\n\n批竹初攒耳，\n桃花未上身。\n\n他时须搅阵，\n牵去借将军。\n\n\n宝玦谁家子，\n长闻侠骨香。\n\n堆金买骏骨，\n将送楚襄王。\n\n\n香幞赭罗新，\n盘龙蹙蹬鳞。\n\n回看南陌上，\n谁道不逢春？\n\n不从桓公猎，\n何能伏虎威？\n一朝沟陇出，\n看取拂云飞。\n\n\n唐剑斩隋公，\n□毛属太宗。\n\n莫嫌金甲重，\n且去捉飘风。\n\n\n白铁锉青禾，\n砧间落细莎。\n\n世人怜小颈，\n金埒畏长牙。\n\n\n伯乐向前看，\n旋毛在腹间。\n\n只今掊白草，\n何日蓦青山？\n\n萧寺驮经马，\n元从竺国来。\n\n空知有善相，\n不解走章台。\n\n\n重围如燕尾，\n宝剑似鱼肠。\n\n欲求千里脚，\n先采眼中光。\n\n\n暂系腾黄马，\n仙人上彩楼。\n\n须鞭玉勒吏，\n何事谪高州？\n\n汉血到王家，\n随鸾撼玉珂。\n\n少君骑海上，\n人见是青骡。\n\n\n武帝爱神仙，\n烧金得紫烟。\n\n厩中皆肉马，\n不解上青天。\n\n"], ["金铜仙人辞汉歌", "衰兰送客咸阳道"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"]]
},
{"zuozhe": "李白","zuopin": [["静夜思", "床前明月光"], ["蜀道难", "难于上青天"], ["将进酒", "高堂明镜悲白发"]]}]
module.exports = {postList: local_database
}

无他，\n是换行，\t是空格。
image里面timg.jpg是初始界面那张图，Photoshop做的。

pages里面index是初始界面。
index.wxml：

<image hidden="{{yincang}}" class='beijing' src='/image/timg.jpg' bindtap="yincang"></image>
<view hidden="{{xianshi}}" class="biaotou">唐宋名家作品集</view>
<view hidden="{{xianshi}}" class="yiji" wx:for="{{postList}}" wx:for-item="item" wx:for-index="index"><navigator url="./../detail/detail?id={{index}}" ><view><button hidden="{{xianshi}}" class="yiji">{{index+1}}-{{item.zuozhe}}</button></view></navigator>
</view>

用了一个hidden的值切换，hidden=true的时候，图片隐藏，=‘’的时候，图片显示。
index.wxss

page {  display: block;  min-height: 100%;  background-color:whitesmoke;
}
.biaotou{text-align:center;width:100%;line-height: 100rpx;font-size: 60rpx; background-color:bisque;
}.beijing{width:100%;height: 100%;position: absolute;background-size: contain;
}
.yiji{text-align: center;margin-top: 5rpx;line-height: 80rpx;font-size: 50rpx; border-radius: 3px;  border-color:black;background-color:azure;
}

设置了样式，挺丑的。
index.js:

var postData = require("../../data/post-data.js");
Page({data: {postList: postData.postList,yincang:'',xianshi:'true'},yincang: function(){this.setData({yincang:'true',xianshi:''})}
})

里面就一个hidden的值。
pages的detail，作者列表的那个界面。

<view class="biaotou"><view>作者：{{details[id].zuozhe}}</view>
</view>
<view class="yiji" wx:for="{{details[id].zuopin}}" wx:for-item="item" wx:for-index="index"><navigator url="./../detail0/detail0?id={{id}}/{{index}}" ><view><text class="yiji">{{index+1}}-{{item[0]}}</text></view></navigator>
</view>
<text>\n\n\n\n\n\n\n\n</text>
<view class="jishu">第{{id+1}}位作者，共{{details.length}}位作者</view>
<view class="huanti">
<button class="huanti0" bindtap="lastQuestion">◀</button>
<button class="huanti0" bindtap="nextQuestion">▶</button>
</view>

注意：navigator url=”./../detail0/detail0?id={{id}}/{{index}}”，注意id={{id}}/{{index}}，这是把两个参数传递到detail0页面去了，一个id，一个index。
detail.wxss

page {  display: block;  min-height: 100%;  background-color:whitesmoke;
}
.biaotou{text-align:left;width:100%;line-height: 80rpx;font-size: 60rpx; background-color:bisque;
}
.yiji{text-align: left;margin-top: 5rpx;line-height: 70rpx;font-size: 50rpx; border-radius: 3px;  border-color:black;background-color:azure;
}

detail.js：

var postData = require("../../data/post-data.js");Page({data: {id: "",details: postData.postList,},onLoad: function (options) {this.setData({id: parseInt(options.id)})console.log('options---', options)console.log('详情', this.data.details)},nextQuestion: function () {var that = this;if (that.data.id < postData.postList.length - 1) {this.setData({id: that.data.id + 1});}},lastQuestion: function () {var that = this;if (that.data.id > 0) {this.setData({id: that.data.id - 1});}}})

加载，解析数据库，上一题，下一题。

pages里的detail0。
detail0.wxml:

<view class="zuopin"><text>{{details[id].zuopin[index][1]}}</text>
</view>
<text>\n\n\n\n\n\n\n\n</text>
<view class="jishu">第{{index+1}}首作品，共{{details[id].zuopin.length}}首作品</view>
<view class="huanti">
<button class="huanti0" bindtap="lastQuestion">◀</button>
<button class="huanti0" bindtap="nextQuestion">▶</button>
</view>

一个id是作者的序号，一个index是作品的序号。
detail0.wxss：

page {  display: block;  min-height: 100%;  background-color:aliceblue;
}
.zuopin{text-align:center;margin-top:40rpx;width:100%;line-height: 60rpx;font-size: 40rpx;
}

detail0.js:

var postData = require("../../data/post-data.js");Page({data: {id:'',index:'',details: postData.postList,},onLoad: function (options) {this.setData({id: parseInt(options.id.split('/')[0]),index: parseInt(options.id.split('/')[1])})},nextQuestion: function () {var that = this;if (that.data.index < postData.postList[that.data.id].zuopin.length - 1) {this.setData({index: that.data.index + 1});}},lastQuestion: function () {var that = this;if (that.data.index > 0) {this.setData({index: that.data.index - 1});}}
})

注意：
id: parseInt(options.id.split(‘/’)[0]),
index: parseInt(options.id.split(‘/’)[1])
options.id是从上一个页面传递过来的参数，上一个页面是id={{id}}/{{index}}，那这里用split函数切分一下，再把id和index分开，这样就能获得序号了。
最后面app里也改了一些全局的。
app.json：

{"pages": ["pages/index/index","pages/logs/logs","pages/detail/detail","pages/detail0/detail0"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "b3a8ac","navigationBarTitleText": "唐宋名家作品集","navigationBarTextStyle": "black"}
}

改了个导航条的背景色和文字内容。
app.wxss:

/**app.wxss**/
.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box;
}
.jishu{position: fixed;width:100%;text-align:center;margin-top:300rpx;bottom:150rpx;line-height: 70rpx;font-size: 40rpx; background-color:lightcyan;
}
.huanti{position: fixed;width: 100%;height: 100rpx;bottom: 20rpx;display: flex;
}
.huanti0{width: 50%;boder-width: 3px;background-color:bisque;
}

全局用的，detail和detail0的class存在这里了。

完全可以用这个方式做一个微信小程序的作品集了，除了丑，没有啥缺点。

微信小程序作品集实例：跨页面传参，数据库，换行，空格，css相关推荐

微信小程序跳转tabBar页面传参
微信小程序底部tabBar一般通过wx.switchTab进行跳转,但该api无法传参,如何解决传参问题? 网上查了一下,一般都是通过app.globalData全局变量进行传参的,但这种方法在需要配 ...
微信小程序之父子间组件传参
1.创建组件打开微信开发者工具,创建组件,会生成四个文件:wxml,wxss,js,json 在wxml中: <view>我是组件A</view> 在js中: Compone ...
vue 返回上一页传参_H5页面与微信小程序相互跳转并传参(web-view)
H5页面用vue2.全家桶写的. 一.vue代码编写vue中路由的编写 1)vue init webpack test 2)/src/router/index.js中引入路由组件 import Ind ...
微信小程序生命周期和路由传参详解
一.生命周期 1.应用级的生命周期 1.onLaunch 当小程序初始化完成时,会触发onLaunch(全局只触发一次) 2.onShow 当小程序启动,或从后台进入前台显示,会触发onShow 3. ...
微信小程序悬浮按钮-点击传参
1.js-组件 Component({data: {play: false,type:''},properties: {},methods: {changePlay(){let flag = !thi ...
微信小程序之bindtap事件绑定传参
wxml代码: <view class='fen'><text bindtap='prev' data-page="{{pageDang}}">上一页< ...
微信小程序使用onfire.js（事件订阅和分发JavaScript 库）实现跨页面传参，对onfire的全面了解
开发微信小程序时,页面间数据传送多采用URL方式传参.添加全局变量,对于在本地缓存不大实用(感觉操作缓存,应该性能会有一定的损耗吧).而从新打开的页面回到之前的界面,貌似只有放在本地缓存.添加全局变量 ...
小程序图片上传php后台,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
php 点击选择图片上传,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(PHP)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...

微信小程序作品集实例：跨页面传参，数据库，换行，空格，css

微信小程序作品集实例：跨页面传参，数据库，换行，空格，css相关推荐

最新文章

热门文章