微信小程序作品集实例:跨页面传参,数据库,换行,空格,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存在这里了。

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

阅读更多
上一篇答题微信小程序实现(7):python3将题库处理成json格式的。
下一篇Arcgis server发布电子地图(1):简单发布/资料/符号库/快速加载/注意事项
想对作者说点什么? 我来说一句

微信程序 换行

123\n 456

yjyqwe yjyqwe

2017-11-12 16:16:43

阅读数:126

微信程序自动换行

wang19840214 wang19840214

2017-08-15 16:46:30

阅读数:552

没有更多推荐了,返回首页

关闭
关闭