1.富文本编辑器
(1)复制git下载来的文件夹
(2)commom文件夹和editor里的文件
2.富文本解析,两种方式
第一种程序自带标签:<`!-- <rich-text nodes="{{html}}"></rich-text> -->`
第二种组件,调用模板:下载对应的源码
git clone https://github.com/icindy/wxParse.git
引入必要文件
// 导入到js逻辑文件中
var WxParse = require('../../wxParse/wxParse.js');
// 导入必须的样式文件
@import "/wxParse/wxParse.wxss";
数据绑定
var articleHtml = '<div>我是HTML代码</div>';
//写在页面加载事件里
WxParse.wxParse('article', 'html', articleHtml, this, 5);
引入模板
<import src="/wxParse/wxParse.wxml"/>
//这里data中article为bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
2.转发分享
<button open-type="share">分享</button>
onShareAppMessage: function () {
return{
title:"这是一个分享",
psth:"/pages/type/type.wxml",
imageUrl:"https://img0.baidu.com/it/u=3401732207,3726302783&fm=26&fmt=auto&gp=0.jpg",
}
}
3.下拉分页
onReachBottom: function () {
var arr=[
{
img:"https://img2.baidu.com/it/u=3771030443,424141137&fm=26&fmt=auto&gp=0.jpg",
nick_name:"骑鱼的猫",
time:"3小时前",
count:"很简单,豆瓣现在这样就给大家指了一条明路:以后凡是这种国产的风口浪尖的的片子,会涉及到各方背后利益关系的片子...",
like_count:"10w+",
comment_count:"59w+"
}
];
for(let i=0;i<arr.length;i++){
this.data.content.push(arr[i])
}
this.setData({
content:this.data.content
})
},
4.隐藏显示
<view class="class-parent">
<view class="class-child" class="{{content[0]}}" data-k="{{0}}" bindtap="chagehidden">价格详情</view>
<view class="class-child" class="{{content[1]}}"
data-k="{{1}}" bindtap="chagehidden">产地详情</view>
<view class="class-child" class="{{content[2]}}"
data-k="{{2}}" bindtap="chagehidden">商品详情</view>
</view>
<view>
<view hidden="{{hide[0]}}">价格对应的详情</view>
<view hidden="{{hide[1]}}">产地对应的详情</view>
<view hidden="{{hide[2]}}">商品对应的详情</view>
</view>
chagehidden:function(e){
// 获取用户点击的下标
var k=e.target.dataset.k;
//判断点击下标和定义下标
var arr=this.data.content;
for(let i=0;i<arr.length;i++){
if(i==k){
arr[i]='now';
this.data.hide[i]=false;
}else{
arr[i]='';
this.data.hide[i]=true;
}
}
//替换原来的值
this.setData({
content:arr,
hide:this.data.hide
})
},
data数据
content:['now','',''],
hide:[false,true,true],
5.滑块效果
js
changeClass:function(e){
var navInde=e.target.dataset.k
var id=e.target.id
this.setData({
navIndex:navInde,
navId:id
})
},
changeSwiper:function(e){
var id=e.detail.current
this.setData({
navIndex:id
})
},
<scroll-view
class="scroll-view"
scroll-x='true'
scroll-into-view="{{navId}}"
scroll-with-animation="true"
>
<view
class="demo-text {{index==navIndex? 'selected' : ''}}"
wx:for="{{navs}}"
wx:key="index"
>
<!-- 手动触摸事件 -->
<view class="item-text"
bindtap="changeClass"
data-k="{{index}}"
id="nav{{index}}"
>
{{item}}
</view>
</view>
</scroll-view>
<!-- 同步 -->
<swiper
current="{{navIndex}}"
duration="200"
class="swiper-list"
bindchange="changeSwiper"
>
<swiper-item>
<swiper indicator-dots="true" autoplay="true" interval="3000" duration="500">
<swiper-item><image src="/images/swiper_1.jfif" style="width:100%"></image></swiper-item>
<swiper-item><image src="/images/swiper_2.jfif" style="width:100%"></image></swiper-item>
<swiper-item><image src="/images/swiper_3.jfif" style="width:100%"></image></swiper-item>
</swiper>
<view class="classlist">
<view class="list-child" wx:for="{{recom}}">
<image class="list-image" src="{{item[1]}}"></image>
<view class="list-text">{{item[0]}}</view>
</view>
</view>
</swiper-item>